試圖向下拉伸背景，但留下一個空白區域

我忙於將我的HTML網站放入wordpress模板中。它到目前爲止工作，但我堅持在背景。在大頁面中，背景停止並顯示一個大的空白區域。試圖向下拉伸背景，但留下一個空白區域

背景由條紋組成，但也具有從黑暗（向上）到光線（向下）的漸變漸變。

我想將背景拉伸到屏幕的底部。這適用於比我的屏幕更小的頁面，但需要向下滾動的大頁面，背景停止並顯示一個大的空白區域。

我在這裏需要一些幫助 - 我已經嘗試了很多解決方案，其中一些解決了我的大頁面問題，但問題仍然存在於較小的頁面上。我希望有一個解決方案可以在每一頁上將這種背景一直延伸下去。

當前代碼（可在小的頁面，但在大的頁面問題）

html 
{ 
    background: url(images/lines-bg.png); 
    background-repeat: repeat-x; 
}

但當我添加此到HTML CSS，在小頁面，然後出現的問題..

background-size: auto 100%;

我也希望背景可以滾動，不固定。

很多，非常感謝！

來源

2013-07-21 Marnix Bent

我發現瞭如何解決這個問題，我把從HTML CSS代碼，以身體和增加了一些額外的東西，以確保：

html 
{ 
    min-height:100%;  
} 

body 
{ 
    min-height:100%; 
    background: url(images/lines-bg.png); 
    background-repeat: repeat-x; 
    background-size: auto 100%; 
}

來源

2013-08-09 12:59:03

有兩件事情，如果你不具備支持超舊的瀏覽器，你可以嘗試：

可以使用background-attachment: fixed;財產，修復滾動即使背景被加載到頁面初始的方式。

或者您可以使用background-size:cover;屬性，它可以延伸背景以動態地覆蓋內容區域的大小。這並不總是最好的解決方案，但是由於圖像質量可能成爲一個問題，而不同頁面長度會產生不一致的背景。

來源

2013-07-21 16:21:55 Rooster

謝謝您的回答。背景大小似乎在屏幕上模糊了整個圖像[鏈接]（http://puu.sh/3Ic8n.png）。我會在後臺保留背景附件解決方案，但我也希望背景可以滾動（如果可能，還可以）。 –

@MarnixBent是的，背景大小：封面;拉伸圖像以適應內容。它的渲染模糊，因爲你有一個非常瘦的非常高的圖像，它的伸展同樣高度明智，因爲它是爲了適應屏幕寬度明智。你可以減少你的背景圖片的高度來解決這個問題，但仍然可能會有一些變化。你試着看看它是如何讓你的背景圖像的屏幕寬度，而不是2px的初學者。另一種方法是讓垂直漸變漸變爲您設置爲背景色的純色。 – Rooster

背景有多大？當你說background-size: auto 100%它設置背景圖像是它的大小的100％。例如：如果圖像是100px，並且你說background-size: auto 100%它會告訴圖像爲100px，如果你的圖像是background-size: auto 50%，它會告訴圖像爲50px。我相信這是你的問題。

來源

2013-07-21 16:26:45

哦，我明白了，我以爲100％是指html高度的100％。背景圖像是2x1400px。但是，高度超過1400px的頁面仍然會導致空白。 –

我會推薦使用jquery獲取窗口的高度，然後以像素爲單位設置背景圖像的高度。 Jsfiddle：http://jsfiddle.net/HbrDf/ –

我很想實現那個JS，但我不知道如何。我現在有這在我的頭： ' ' –

試圖向下拉伸背景，但留下一個空白區域

回答

相關問題