引导 - 带有背景色巨型屏幕的重复图案叠加

Question

我正在尝试在我的巨型屏幕的丽贝卡紫色背景颜色上获得重复的背景图像。我知道我做错了什么，只是不知道它是什么。代码如下：

.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(imagesbg_imagesmaze_white.png) repeat center center;
z-index: -1;
}

感谢所有帮助。谢谢。

Answer 1

由于 z-index：-1，您的迷宫位于巨型机器人后面。你需要做的是交换背景，就像在这个小提琴 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;
}