背景圖像被切斷

Question

是任何人都知道的背景圖像是如何被切斷，由於窗口的較小的尺寸。請看看這個網站。 http://nfldata.com。儘量讓窗口小於900px的寬度。然後滾動到右側。你會發現背景圖片不在那裏。但對於頁腳來說，它看起來像。什麼CSS代碼導致這個問題？

Answer 1

我認爲你正在尋找的內容，包裝DIV的背景，如下圖所示。由於該元素的寬度設置爲100％，並且center-block div的固定寬度爲1000px，因此如果將窗口摺疊爲小於1000px的寬度，內容包裝將不會顯示，背景將會有效消失。

HTML元素...

<div id="content-wrapper"> 
    <div class="center-block"> 
    .... 
    </div> 
</div> 

相關CSS：

#content-wrapper { 
    margin: 0 auto; 
    width: 100%; 
    background-image: url(/images/content-background.png); 
    background-position: center top; 
    background-repeat: repeat-y; 
} 

#content-wrapper .center-block { 
    width: 1000px; 
} 

至於標題，你會看到它有

#header { 
    width : 100% 
    ... 
} 

這將聲明將元素的寬度設置爲父容器的寬度 - 在這種情況下，它是活動窗口（在您的情況下爲90 0px或更少）。但是，由於頁面上還有其他指定1000px或更大寬度的元素，因此這些div內的內容會顯示在該頁面之外。

你可以有在網頁通過主體的寬度設定爲1000像素擴大（或任何頁的最大寬度是），在該情況下，標題將擴大到規定大小的100％。或者，您可以用相對定位的方式圍繞整個內容，然後100％指示將指示周圍div的寬度的100％，而不僅僅是窗口。