CSS修復了重複背景問題

我正在設計一個固定重複背景的網站，但無法弄清楚爲什麼它有一個問題。CSS修復了重複背景問題

如果您在一個小窗口中加載該網站，然後向右滾動，背景不會繼續，而是顯示背景顏色。

任何想法？

網站是：http://new.focalpix.co.uk/

CSS的背景是：

body { 
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed; 
}

來源

2009-01-11 Rich Bradshaw

嗯......錯誤必須與您的CSS做其他事情，因爲我剛剛嘗試了您發佈的其他內容的CSS片段，並沒有問題。 – 2009-01-11 11:49:58

試試下面的CSS：

body, html { 
    color:#fff; 
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x; 
    text-align:center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif; 
} 

body { 
    font-size: 70%; 
}

它看起來像（在Opera和Chrome），瀏覽器將瀏覽器初始視口之外的區域視爲HTML標記的一部分，但不屬於BODY的一部分。您可以通過將背景圖像放在HTML上而不是BODY標籤來驗證這一點，然後查看它只出現在文檔的滾動視圖區域中。我不知道爲什麼會發生這種情況 - 有人嗎？

雖然上面的CSS似乎解決了這個問題。

來源

2009-01-11 12:17:47

謝謝 - 當您修改您以前寫過的舊代碼時，會發生這種情況！ – 2009-01-11 15:34:48

您已經定義主體背景：在style.css中第13行的網址，但在規則的起始體的背景也被定義規則在線17上。

第17行的規則是body，html，但是第11行開始的規則僅適用於body。你也許可以凝聚到一條規則，定義要的背景是什麼 - 從URL顏色或圖像

來源

2009-01-11 12:01:38 rejj

這是由於<body>標籤默認設置爲瀏覽器窗口寬度的100％ - 而不是網站。這意味着當窗口的寬度小於960像素 - 網站的寬度時，主體塊結束。爲了解決這個問題，只需設置：

body {min-width: 960px}

不幸的是，最小寬度不老版本的Internet Explorer沒有JavaScript的黑客稱爲minmax工作。我會建議在一些條件註釋中加入javascript嵌入代碼，以防止在新瀏覽器中出現不必要的HTTP請求和潛在的兼容性錯誤。所以嵌入MINMAX像這樣：

<!--[if lte IE 7]> 
<script type="text/javascript" src="minmax.js"></script> 
<![endif]-->

而且，一般的提示 - 這些問題是很容易通過firebug玩來解決。

來源

2009-01-11 12:20:47

CSS修復了重複背景問題

回答

相關問題