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

我有我的網站設置在'頁面部分'垂直滾動。第一個頁面部分的寬度和高度都是100％，其他部分的寬度和高度都是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; 
}

來源

2014-02-26 user2684452

https://developer.mozilla.org/es/docs/CSS/background-attachment，順便說一句，你真的找css +背景+固定？ – coma

@coma雖然你是對的，但有時候w3schools很糟糕，我建議鏈接到https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment。我敢肯定，你提供的鏈接的信息是好的，但w3schools並不是所有可靠的... –

@coma哈哈「鏈接納粹」 –

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

這將是我的建議，這是我用什麼，它爲我工作。

來源

2014-02-26 23:04:43 Vladimir

@Vladmir工作得很漂亮。謝謝。等待定時器upvote – user2684452

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

回答

相關問題