跨浏览器背景伸展使用背景大小

Question

我的背景图像宽40像素，高1200像素，我想用作网站的背景图片。在大多数情况下，用户监视器的大小不能超过1200px，因此我只能使用“background-repeat：repeat-x”，图像将覆盖整个背景。对于较大的显示器，虽然底部可以看到间隙。

为了解决这个问题，我尝试使用background-size属性。对于Firefox，这非常有效，例如：

background-image: url('gradient.png');
background-repeat: repeat-x;
background-size: 40px 100%;

但是在基于Webkit的浏览器上，这并不像预期的那样。

有什么建议吗？

- 编辑 -

有一件事我忘了提到：当我使用像素值作为高度时，背景大小也适用于webkit。但问题是，我需要使用JavaScript初始设置高度，每次调整浏览器大小时，我都希望避免这种情况。

Answer 1

试试这个：

-webkit-background-size: 40px 100%;

Answer 2

认为背景大小调整仍然有点实验性。

我建议您让背景淡化（使用渐变）为与背景颜色相同的纯色。或者使图像垂直无缝，并根据最适合背景的方式在两个方向上重复。

你也可以使用background-size（和专有版本），但是使用repeat或fade技巧作为后备。