背景隨滾動條消失。爲什麼？

這是我有：800px width div的100％width容器與背景圖像重複水平。背景隨滾動條消失。爲什麼？

直播：http://www.baskra.com

當我調整瀏覽器窗口，產生滾動條。當我滾動它時，我發現背景圖像僅適用於原始的未滾動區域，如上所示。

enter image description here

我怎樣才能解決這個問題？

的jsfiddle：http://jsfiddle.net/wcdXK（不是每個圖像的工作，但我相信，這裏最重要的是CSS）。

來源

2014-04-10 Giovanna Cóppola

看起來像它的溢出問題。嘗試將'overflow：auto'應用於'.pages-container'。 – Jack

Jack，它解決了這個問題，但它使滾動條消失。 –

您應該使用「min-width：800px」替換.pages-container CSS類中的「width：100％」 - 如果窗口大小變小，它將強制背景與容器寬度相同超過800像素。

.pages-container { 
    background-attachment: scroll; 
    background-image: url('http://baskra.com/images/bg/bg-scroll.png'); 
    background-repeat: repeat; 
    min-width: 800px; 
    left: 0; 
}

檢查在這裏：http://jsfiddle.net/wcdXK/3/

來源

2014-04-10 01:39:22 potashin

現在我明白了邏輯。我將相同的規則應用於我的幻燈片，並且工作完美。非常感謝你。 –

由於寬度適用於包含塊的區域，作爲整個容器較小的背景縮小以應用於同一區域（以及pages-container元素）。

來源

2014-04-10 01:27:45

我注意到你正在經歷的佈局的許多問題（你發佈一個類似的問題）

你應該讀了自適應網頁設計的文章試圖瞭解媒體查詢

這樣的（隨機從谷歌挑選） http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

來源

2014-04-10 01:29:39 TooShyToAsk

我其實建議使用媒體查詢，但客戶現在買不起。它發生了！該網站完成後，我只需要解決這個滾動條問題。 –

背景隨滾動條消失。爲什麼？

回答

相關問題