拉伸背景图像答案

【问题标题】：stretching background image拉伸背景图像
【发布时间】：2011-11-12 15:29:45
【问题描述】：

我有一个尺寸为 1x947 像素的背景图片，

问题是它是一个渐变色，所以我只使用repeat-x，但是当页面高度超过 947 像素时，它会显示为背景颜色，

background-image:url(bg.gif);
background-repeat:repeat-x;

如何拉伸？

这是 fiddle http://jsfiddle.net/K9cUd/1/ 上的代码示例

【问题讨论】：

【解决方案1】：

如果没有代码或示例，很难说。

你可以使用 CSS3 的

background-size: 100%;

应该将其拉伸到整个页面大小。

你可能需要这样做

background-size: 0 100%; 或 background-size: 0% 100%;

所以宽度不会改变。

【讨论】：

当然，它应该不言而喻（但你真的必须这样做），只适用于现代浏览器。
仅供参考，如果您设置 background-repeat: no-repeat; 和 background-size: 100% 100%;，我只能在 FF 或 IE9 上完成这项工作。它仅适用于 Y 轴并在 chrome 中使用 repeat-x。

【解决方案2】：

如果您不想使用百分比，请使用：

    background-size: cover;

【讨论】：