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

【问题标题】：Background image doesn't fit browser when resized调整大小时背景图像不适合浏览器
【发布时间】：2013-04-19 18:53:07
【问题描述】：

当我调整窗口大小时，我似乎无法让我的背景与浏览器保持一致。请帮忙！以下是向您展示发生了什么的图片：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;
}

【问题讨论】：

代码中有一个小错误：repeat 应该是background-repeat

标签： image browser background-image stretch css

【解决方案1】：

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

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

 html {height:100%}

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

【讨论】：

【解决方案2】：

有很多方法可以做到这一点，如果您将图像设置为身体的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。

【讨论】：

感谢您的回复。问题是我使用的是这个确切的代码并且效果很好，但唯一的问题是，当我开始添加内容时，内容在背景图像下方，我不知道如何将其拉出来顶部？
谢谢。这适用于我的 PhoneGap 应用程序，而没有其他方法。非常感谢！

【解决方案3】：

固定图像

如果您不需要背景图片随页面滚动，您仍然可以将背景图片应用到body标签，如果您设置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 图像确实需要随页面滚动，可能值得应用一些 JavaScript 或 jQuery 代码，以保持 HTML 和 CSS 相对简单。

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）

为了保持纵横比，将图像的原生宽度和高度传递给上述函数，以及可选的第三个参数，用于设置背景图像是否应该覆盖或包含页面（默认为封面）。

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

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

【讨论】：