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％。