如何使背景位置固定且居中？

Question

我将我的网站设置为“页面部分”，以进行垂直滚动。第一个页面部分的宽度和高度均为100％，其他部分也是如此，但具有可以滚动并伸展至浏览器宽度的背景图像。我试图保持这个背景图像不动，并使其固定位置，以便它保持静止，而下方的内容向上滚动并覆盖背景图像。

因此，我的问题是如何在 background-position:center 中添加fixed属性？

/* div that has background image */

<div class="page-section home-bg clear" id="home">
</div>

/* rest of content I want to scroll up and over */

<div class="page-section clear" id="about">
    <div class="wrapper" style="background-color:#fff;">
    </div>
</div>

.page-section {
    width:100%;
    margin:0px auto 0px auto;
    overflow-x:hidden;
}
.home-bg {
    height:100%;
    background:url('img/home-bg.jpg') no-repeat;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    z-index:1;
}

- user2684452

---

https://developer.mozilla.org/zh-CN/docs/CSS/background-attachment ，顺便问一下，你是不是搜索了 css + background + fixed？ - coma

虽然你说得没错，w3schools有时确实很烂，但我建议链接到https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment。我相信提供的链接信息是好的，但w3schools并不是那么可靠... - Dryden Long

Answer 1

#main{
   width: 100%;
   height: 100%;
   background: url('../images/bg10.jpg') no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover; 
}

这是我的建议，这就是我所使用的方法，对我很有效。

- Vladimir