固定在移動設備上的背景

我在設置此頁面的背景 - http://troov.co/team/（在移動設備上）時遇到問題，因此背景圖像被固定，只是內容向下滾動。固定在移動設備上的背景

此刻，背景圖片會隨着內容向下滾動，這意味着有很多空白區域，所以照片下方的文字不可見。

我已經試過固定寬度，而在100％的高度，並把background-attachment: fixed;

也許我把它放錯了地方，但這些解決方案都在工作。請真的很感謝任何幫助。

的CSS代碼如下：

.container-fluid.team { 
    background-image: url(../images/bg_teampage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
}

來源

2015-02-06 Sean Stevens

請在你的問題中加入相關代碼除了鏈接 – JRulle 2015-02-06 14:57:31

會不會，謝謝你的提示。 – 2015-02-06 14:58:18

套用固定的背景到body：

body { 
    background-image: url(../images/bg_teampage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    background-attachment: fixed; 
}

來源

2015-02-06 15:01:06 JRulle

工作，謝謝！ – 2015-02-06 15:27:21

雖然你的背景是固定的，它是應用於div不是。您可以將「容器流體團隊」設置爲絕對位置並執行一些Z-index內容，或者將固定背景圖像附加到文檔正文。

來源

2015-02-06 14:59:30 jdu

如果你想保持內部.container-fluid的background-image您可以添加position:fixed和overflow-y: scroll到.container-fluid.team這樣的：

.container-fluid.team { 
    background-image: url(../images/bg_teampage.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    overflow-y: scroll; 
}

否則我會」已將背景移至body。

來源

2015-02-06 15:05:53 Topr

添加以下CSS樣式：

body{ 
    overflow:hidden; 
    } 

.container-fluid.team { 
background-image: url(../images/bg_teampage.jpg); 
background-repeat: no-repeat; 
background-size: cover; 
width: 100%; 
height: 163%; 
}

來源

2015-02-06 15:13:20 rJ7

我知道從iOS的Safari瀏覽器的老臭蟲，他們不支持background-attachment: attached;，但我認爲他們在一年多前修正了這個錯誤。你介意告訴我們你在測試什麼設備/操作系統/瀏覽器？

我用來試圖通過創建一個完整大小的div併發送到後面（負z-index）來解決此問題。

HTML

<body> 
    <div id='background'></div> 
    <!-- Actual Page Content Here --> 
</body>

CSS

#background { 
    background-image: url(path/to/image.jpg); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -999999999; 
}

我記得是有幾個不同的插件/庫我會用這種自動化，並給予其他功能。但至少在一年之內，我還沒有看到這個問題是iOS更新。

查看jQuery backstretch插件。

來源

2015-02-06 15:25:15

固定在移動設備上的背景

回答

相關問題