• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background - Ebenen

J

Johannes11

Neues Mitglied
PROBLEM HAT SICH SCHON GELÖST. Vielen Dank und Grüße





Hallo zusammen. Ich sitze jetzt schon länger an einem Problem und komme da nicht weiter. Ich habe bei der Seite als Background ein Fullscreenbild, welches ich über CSS eingefügt habe

Code: 
html {    background: url(img/1.png) no-repeat center center fixed;
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover;
    -ms-background-size:cover; 
    background-size:cover;
}

Jetzt möchte darauf eine halbtransparente Fläche haben, die der Breite des Wrappers (800px) entspricht. Der Content soll also quasi auf der hellen, leicht transparenten Fläche liegen und das Bild weiterhin normal im Hintergrund Fullscreen sein. Jetzt zeigt er mir aber egal was ich mache, immer nur das Foto an. Ich könnte natürlich zu Not auch ein weisses Bild über das Backgroundfoto legen, aber ich will es lieber mit Background-color und opacity lösen. Weiss da jemand wie ich das am besten hinkriege?
Bin für jede Hilfe dankbar.

Schöne Grüße

Johannes
 
Zuletzt bearbeitet:
Um einem Element ein background-image und gleichzeitig eine Farbe zuzuweisen, muss man beides in eine Zeile schreiben.

Nicht getestet:
HTML: 
#mydiv {
  background: url(path/image.png) no-repeat rgba(0,0,0,0.5)
}
 
Habe dem Wrapper schon vorher versucht eine background-color zuzuweisen. Habs jetzt aber nochmal mit rgba versucht, hat aber auch keine Wirkung gezeigt.

Code: 
#wrapper {    
width: 820px;
    margin: 0 auto;
    text-align:left;
    background-color: rgba(255,0,0,1);
}

Der HTML-Code ist ziemlich "normal", aber ich kann ihn ja trotzdem mal posten

HTML: 
<head> ... 
<style type="text/css">html {    background: url(img/1.png) no-repeat center center fixed;    -webkit-background-size:cover;     -moz-background-size:cover;     -o-background-size:cover;    -ms-background-size:cover;     background-size:cover;}</style>
<link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="css/script.js"></script>
</head>
<body> 
    <div id="wrapper">              <div id="head">            <img src="img/head.png">        </div>                   <div id="left">

 ////     hier kommen nur noch einige divs   //////

                </div>

</body>    </html>

Grüße
 
Hallo. Ich habe es jetzt so, dass der Wrapper halbtransparent ist
Code: 
#wrapper {	width: 820px;
	margin: 0 auto;
	text-align:left;
	background-color:#fff;
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;

Das Problem ist jetzt, dass (natürlich) auch alles innerhalb des Wrappers opacity 0.6 hat, was ja nicht sein soll. Habe schon versucht den einzelnen Divs opacity:1 und einen höheren z-index zu geben, aber das hat auch nicht geholfen. Weiss da jemand vielleicht weiter? Eine zweite Frage hätte ich in dem Zusammenhang auch noch. Kann ich es hinbekommen, dass der Wrapper neben der festgelegten Breite eine Höhe von 100% hat, also immer im Browserfenster von oben bis unten reicht (ohne ihm eine feste Höhe geben zu müssen)?

Vielen Dank im Voraus und schöne Grüße

Johannes
 
Transparenz im CSS bezieht sich immer auch auf alle Kind-Elemente. Das kann man mit CSS alleine nicht umgeben.

Wenn Du eine Transparenz auf diese Art im Hintergrund haben willst, hast Du aber immernoch 2 Möglichkeiten:

a) Verwende eine 1 Pixel große Grafik die die von dir gewünschte Transparenz enthält. Binde diese als Hintergrundbild in dem Element ein dessen Hintergrund halbtransparent sein soll.

b) Baue parallel zu dem Element, welches die nicht-transparenten Inhalte beinhalten soll ein weiteres Element auf, welches wiederum die gewünschte Transparenz bekommt. Das eine Element kannst Du dann per absolute Positionierung und z-index über bzw. unter das andere schieben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben