raven16
Lieutenant
- Registriert
- Nov. 2008
- Beiträge
- 580
Hi,
ich habe ein Image als Hintergrund und möchte dieses Image mit einem Pattern überlappen.
Habe jetzt schon einige Dinge ausprobiert, aber es funktioniert leider bisher noch nicht.
HTML
CSS
Wenn ich mit Strg + F5 aktualisiere, dann sieht man ganz kurz die Overlay-Grafik im gesamten Body, jedoch wird sie "gefühlt" von dem Background-Image ersetzt. Wenn ich das Background-Image mit Firefox deaktiviere, dann ist das Overlay immernoch nicht sichtbar.
Tipps nehme ich gerne dankend an
ich habe ein Image als Hintergrund und möchte dieses Image mit einem Pattern überlappen.
Habe jetzt schon einige Dinge ausprobiert, aber es funktioniert leider bisher noch nicht.
HTML
HTML:
<div class="jumbotron vertical-center" id="background">...Inhalt der Seite...</div>
<div id="background-pattern"></div>CSS
Code:
#background {
background: url('img/build/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */
}
#background-pattern {
background-image: url('img/build/background_pattern.png');
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-repeat: repeat;
}Wenn ich mit Strg + F5 aktualisiere, dann sieht man ganz kurz die Overlay-Grafik im gesamten Body, jedoch wird sie "gefühlt" von dem Background-Image ersetzt. Wenn ich das Background-Image mit Firefox deaktiviere, dann ist das Overlay immernoch nicht sichtbar.
Tipps nehme ich gerne dankend an
