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

这是我的建议，这是我使用的，它对我有用。

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

1 个答案: