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

Question

我在“页面部分”中设置了我的网站以进行垂直滚动。第一个页面部分是 100% 的宽度和高度，其他部分也是如此，但有一个背景图像，可以滚动和拉伸到浏览器的宽度。我正在努力保持这一点并将其固定在位置上。所以它保持不动，下面的内容会向上滚动并覆盖背景图像。

所以我的问题是如何将fixed 属性添加到background-position:center 中心；

/* 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;
}

Answer 1

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

这是我的建议，这是我用过的，对我有用。