Bootstrap - wiederholendes Muster Overlay mit Hintergrundfarbe Jumbotron

Question

Ich versuche, ein wiederholendes Hintergrundbild über meine Rebecca-lila Hintergrundfarbe für mein Jumbotron zu bekommen. Ich weiß, dass ich etwas falsch mache, weiß nur nicht, was es ist. Hier ist der Code:

.jumbotron { 
background-color: rebeccapurple; 
color: white; 
width: auto; 
height: 350px; 
margin-bottom: 100px; 
position: relative; 
display: block; 
font-family: FontAwesome; 
} 

.jumbotron::after { 
content: ''; 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
background: url(\images\bg_images\maze_white.png) repeat center center; 
z-index: -1; 
} 

Alle Hilfe ist willkommen. Vielen Dank.

Answer 1

Ihr Labyrinth befindet sich aufgrund des z-Index: -1 hinter dem Jumbotron. Was Sie tun müssen, ist die Hintergründe um swap, wie in dieser Geige http://jsbin.com/tekefobive/edit?css,output

.jumbotron { 
background-image:url('pattern'); 
... 
} 
.jumbotron:after{ 
background:purple; 
z-index:-1; 
... 
} 

Answer 2

// Try This 
.jumbotron { 
background: url("IMAGE PATH") rebeccapurple repeat center center; 
color: white; 
width: auto; 
height: 350px; 
margin-bottom: 100px; 
position: relative; 
display: block; 
font-family: FontAwesome; 

}