css - 填充窗口的背景图像？

Question

我有一个背景图片，我想填充我网站的整个背景。我用：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

图像为 2000 像素 x 2000 像素。问题是，当浏览器窗口大于 2000 像素时，您会看到白色背景。如果浏览器窗口比图像大，有没有办法让图像拉伸？

Answer 1

首先，如果您只是将其用作背景，请避免使用如此大的图像作为背景。你可以这样做，不要把所有东西都盖上。只需在样式标签中放这两个，你就会得到它。

background-image:url('your image');
background-size: cover;

如果图像扩展过多，可能会影响图像质量，但这是可行的。

Answer 2

尝试这个：

background-size: 100% auto;

Answer 3

background-size: cover;似乎对我来说两种方式都有效 - 如果图像大于元素则缩小图像以填充，或者如果图像更小则拉伸图像以填充。这是一个小图像拉伸以填充较大 div 的示例：http: //jsfiddle.net/MRSallee/Q7STG/

Answer 4

我更喜欢使用这个：

background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;