image - 调整大小时背景图像不适合浏览器

Question

当我调整窗口大小时，我似乎无法让我的背景保持适合我的浏览器。请帮忙!以下是向您展示正在发生的事情的图像:View images第一张图是怎么装的，第二张是水平拉伸(stretch)的，第三张是垂直拉伸(stretch)的(不好意思，不知道为什么上传了两次)

这是我正在使用的代码:

body {
    background: url('images/bkg-img.png');
    repeat: no-repeat;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

Answer 1

问题是 background-size: cover 覆盖了 background 定位区域(参见 W3C page )，在某些情况下，这是计算出的高度 body 。并不总是和 window 一样高!

我找到的最简单的解决方案也是放一个

 html {height:100%}

在样式表中。但是您可能需要对您的设置进行一些试验才能使其按您想要的方式工作。我很确定它会因浏览器而异，并且取决于您使用的是标准模式还是怪癖模式。