css gradiant背景長頁

Question

我有一個背景圖像在我的HTML與CSS頁面，從頂部的藍色，到底部的白色。

但是，圖像400x800和頁面要長得多，所以它會重複。

頁面長度隨時變化。

是否有可能解決這個問題，以便背景延伸到頁面長度？或者可能會讓它不重複，並使背景變成白色，並在頂部顯示圖像？

如果是，請問怎麼樣？

Answer 1

，最簡單的是設置圖像到不重複，然後設置背景顏色相同的梯度的一端：

body { 
    background: white url('yourImage') repeat-x top left; 
} 

獲得的梯度來拉伸以適應窗口是可行的，但是更多的工作，並會需要一些JavaScript。

Answer 2

我知道有完成這個jQuery的/ JavaScript方法：

Resizable Backgrounds with jQuery

Stretch background image - jQuery - Demo

但除了求助於像那些解決方案 - 你可以：

• 選擇重複背景圖案（紋理等）
• 創建一個很長的背景圖像，可以處理您的頁面將處理的大多數導航。

Answer 3

另一種替代方法是使兩端的漸變色相同，最大色差爲50％。