手機上的Bootstrap全寬背景

我正在嘗試在我的Bootstrap網站上獲得全寬背景。我對桌面瀏覽器有效，但移動設備不玩球。這是我的代碼（簡化）;手機上的Bootstrap全寬背景

html { 
    background:url(../img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
    background-color: #131516 !important; 
} 
body { 
    background-color: transparent !important; (to override bootstraps default color) 
}

我遇到的問題是很多我測試上（安卓/ iphone）的移動設備不支持固定位置，背景圖像爲您滾動頁面向上移動。我的站點全部內置在一個頁面中，因此將上面的代碼移動到body標籤意味着背景圖像會隨着內容（現在的100％高度）在垂直方向上很長而變得非常緊張。

如果有更好的css方法來做到這一點是理想的，但我可以想象jquery是需要的。我已經嘗試了幾個來自here的jQuery示例，其中沒有一個可以正常工作。有沒有人有一個簡單的跨平臺的方式使這項工作？

來源

2012-11-26 photoman355

bootstrap-responsive.css應用邊距等，所以也許干擾。我做了類似tomrudge.com的事 - 不記得我沒做過什麼，但沒有審查 –

如果你不介意加載一個插件，你可能想看看backstretch：http://srobbin.com/jquery-plugins/backstretch/ –

製作一個div並使用position：fixed。

.background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background:url(../img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; /* or change accordingly - not quite clear in question */ 
    width: 100%; 
    background-color: #131516 !important; 
}

希望這會有所幫助。

來源

2013-09-13 17:38:08

手機上的Bootstrap全寬背景

回答

相關問題