窗口大小調整時，標題圖像停止重複

所以我有一個圖像卡在我的頁面頂部，重複所有的方式跨越頂部。出於某種原因，當我調整窗口大小，然後向右滾動到停止重複。 div是包裝器之外的文檔中的第一個。有任何想法嗎？窗口大小調整時，標題圖像停止重複

#header { 
    background-image:url('http://daveywhitney.com/img/paperhead.png'); 
    background-repeat: repeat-x; 
    width: 100%; 
    height: 145px; 
    margin:0 0 20px 0; 

}

來源

2010-08-10 Davey

你能指點一個有效的例子嗎？ – Frankie 2010-08-10 16:59:29

@Frankie StackOverflow有同樣的問題，以及ux.stackexchange.com – 2012-09-14 17:35:54

@MattRockwell解決它的訣竅是應用CSS規則「固定」，但是會將DIV * always *顯示出來。在SO上，這根本行不通。 SO目前發生的事情是，TOP-BAR的尺寸與100％的視角一致，如果您將TOP-BAR的尺寸設置爲BODY，它會一直運行良好。看看CSS'fixed'屬性。 – Frankie 2012-09-15 02:29:33

這似乎在FireFox中工作正常。調整窗口大小時請檢查父元素的寬度。

來源

2010-08-10 17:11:57

載由代碼可用的基準是： -

寬度 - 100％（圖像的那麼整個寬度考慮在內）
「背景重複 - X」 - 圖像將重複水平地

在內部，比如圖像的寬度是250px &您的完整瀏覽器屏幕的寬度是1024px。因此從技術上講，圖像將水平重複至少5次，其中最後一次將顯示一點點。

現在，如果您調整瀏覽器大小或在彈出式窗口中查看同一個網頁，您的瀏覽器屏幕必須修改其寬度。假設現在你的瀏覽器屏幕寬度是220px。由於圖像寬度大於瀏覽器屏幕寬度（在此特定測試用例中），因此圖像不會重複，因此您將無法看到完整圖像。

這不是說有什麼錯誤，它只是我們需要理解的邏輯部分。

希望它有幫助。

來源

2010-08-10 18:29:36

從你提供的細節很難說清楚，但這裏有個答案可以解決問題。添加以下內容

#header { 
    background-image:url('http://daveywhitney.com/img/paperhead.png'); 
    background-repeat: repeat-x; 
    width: 100%; 
    height: 145px; 
    margin:0 0 20px 0; 
    overflow:hidden; 
    position:relative} 

#wrapper {width:960px;margin:0 auto;position:relative}

來源

2011-05-12 15:04:27 breezy

您需要添加一個min-width，使其略大於主要內容。

來源

2012-09-14 19:17:45

窗口大小調整時，標題圖像停止重複

回答

相關問題