我有以下CSS
.bg
{
height: 100%;
background: url("${image}") no-repeat center;
background-size: cover;
margin-top: -7px;
}
并这样使用
<div class = "bg"></div>
我想要的是这样的静态图像,但是如果向下滚动(图像仍然存在),则页面文字开始出现。我应该如何更改CSS?
我的页面文字是
<div class = "container">
<div class = "jumbotron well">
<div class = "page-header">
<h3>Header
<small>subheader</small>
</h3>
</div>
<p>Hello world</p>
</div>
</div>
编辑:
进一步澄清。我想要的是全屏居中图像(css这样做),该图像也是静态的,因此,如果向下滚动,则可以在其上滚动文本。
最佳答案
只需添加background-attachment: fixed;
。
这样的事情应该起作用。
body {
background-image: url('https://images.alphacoders.com/633/633643.jpg');
background-size: cover;
background-attachment: fixed;
color: #fff;
}
<div class="fixed-bg"></div>
Just text<br> Just text<br> Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just
text
<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just
text
<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>