我正在建立一个网站,我希望将背景图像固定。我已经在以下CSS的桌面浏览器中实现了这一目标,但它在智能手机上不起作用。这是一个已知的带有背景 - 固定的错误。我不知道如何修复它。
#page-header{
height: 300px;
background: url("../img/wood.jpg");
background-attachment: fixed;
color: #fff;
border-bottom: 1px #eee solid;
padding-top: 50px;
}
我的html
<header id="page-header">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 text-center">
<h1 id="h1header">Products</h1>
<p>Local, Organic, Tasty</p>
</div>
</div>
</div>
</header>
您可以在http://maisonbergeret.com/product.html
上找到我的网站我的问题是如何保持完全相同的效果。
这是我为Page-Header更改的。
#page-header:before{
content: "";
width: 100%;
height: 300px;
position: fixed;
background: url("../img/wood.jpg")no-repeat center center;
color: #fff;
border-bottom: 1px #eee solid;
padding-top: 50px;
z-index: -10;
display: block;
left: 0;
top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
标题下方,我有一个具有ID ="产品"
的部分产品section#products{
background-color: #FAEBD7;
}
与我的身体背景色相同的颜色:#faebd7;
调整后的边距,现在起作用。