Question

当我调整窗口大小时，似乎无法让我的背景适合我的浏览器。请帮忙！以下图片显示了正在发生的事情：View images 第一个图像是应该如何安装，第二个是我水平拉伸时，第三个是我伸展时垂直（对不起，不知道为什么它上传我的图像两次）

这是我正在使用的代码：

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-image它不会缩小或扩展它将保持不变这是预期的行为。

你可以用......像这样：

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

他们的风格：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

为了能够将您的内容放在背景图像之上，请将您的内容放在另一个div中：

<div class="pagewrap">
    <p>Content</p>
</div>

等级：

.pagewrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

View demo或other techniques，关于z-index。

Answer 2

问题是background-size: cover涵盖了背景定位区域（请参阅W3C page），在某些情况下，这是计算出的身体高度。并不总是和窗户一样高！

我发现的最简单的解决方案也是

 html {height:100%}

样式表中的

。但您可能需要对设置进行一些实验，以使其按您希望的方式工作。我很确定它在不同的浏览器中有所不同，取决于你是使用标准还是怪癖模式。

Answer 3

固定图像

如果您不需要bg图片与页面一起滚动，那么如果设置body

，仍然可以将bg图像应用于background-attachment: fixed;标记

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

的jQuery

如果bg图像确实需要与页面一起滚动，那么为了保持HTML和CSS相对简单，可能值得应用一些JavaScript或jQuery代码。

function stretchBg(width, height, contain) {
    var pageWidth  = $(document).width();
    var pageHeight = $(document).height();

    if ((pageWidth / pageHeight) > (width / height) == !!contain)
        $('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
    else
        $('body').css({backgroundSize: pageWidth + 'px auto'});
}

$(document).ready(function(){ stretchBg(640, 480); });   // Page load
$(window).resize(function(){  stretchBg(640, 480); });   // Browser resize

JSFiddle Demo（以及演示的standalone version）

要保留纵横比，图像的原始宽度和高度将传递给上述函数，以及bg图像是否应覆盖或包含页面的可选第三个参数（默认为封面）。

或者，这是一个more-advanced demo（和standalone version），可以自动检测当前应用于body标签的bg图像的原始分辨率。以下是使用它的示例：

$(document).ready(function(){
    FullBodyBackground.init({contain: false});
});

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

3 个答案:

固定图像

的jQuery