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

Posted 2023-05-08

【中文标题】如何使背景位置固定并居中？

【英文标题】：How to make background position fixed and centered?

【发布时间】：2014-03-30 02:37:35

【问题描述】：

我在“页面部分”中设置了我的网站以进行垂直滚动。第一个页面部分是 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;

【问题讨论】：

developer.mozilla.org/es/docs/CSS/background-attachment ，顺便说一句，您是否真的在寻找 css + 背景 + 固定？

@coma 虽然你是对的，但 w3schools 有时很糟糕，我建议改为链接到 developer.mozilla.org/en-US/docs/Web/CSS/background-attachment。我确定您提供的链接上的信息很好，但 w3schools 并不是那么可靠...

【参考方案1】：

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

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