CSS Bootstrap: Background Image Overlay Pattern

[raven16]

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

<div class="jumbotron vertical-center" id="background">...Inhalt der Seite...</div>
<div id="background-pattern"></div>

CSS

#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

 

[R4sh]

stell mal z-index auf 1, 2 unsw. Ich habe keine Ahnung warum aber manchmal funktioniert es bei mir, genauso wie wenn ich anstatt absolute relative eingebe obwohl, es keinen sinn macht

 

[savuti]

Negativer z-index ist nicht optimal. Hast du mal nen Link?

 

[raven16]

Jo danke Es lag tatsächlich am z-index.
Aber leider ist mein Overlay nicht ganz perfekt bisher
meine transparente Overlay-Grafik ist 6x6 Pixel


So siehts jetzt leider unschön aus:

 

[savuti]

Das liegt dann wohl eher an der Grafik. Wie soll es denn aussehen?