调整窗口大小时设置背景图像答案

【问题标题】：set background image when window is resize调整窗口大小时设置背景图像
【发布时间】：2013-05-25 10:01:55
【问题描述】：

我正在尝试在我的 html 正文中设置背景图像。当窗口大小为1280px时，此时背景图片设置为全身，如果窗口大小低于800px；宽度没有问题，但高度逐渐减小，但我想设置背景图像宽度和高度设置为全屏，当窗口调整大小时。

   body
{
 background: url(images/back.jpg) no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}

【问题讨论】：

为您的问题设置接受答案。

标签： css

【解决方案1】：

'background-size:cover' 属性有很多优点，你就快到了。

以下内容应该可以为您解决问题，您可以在
http://jsfiddle.net/panchroma/gXGcD/ 看到它的实际效果

您会看到，我还强制将 body 和 html 元素的高度设为 100%，并将背景图像的位置居中。

IE9 支持背景尺寸，IE8 支持 polyfill @https://github.com/louisremi/background-size-polyfill

祝你好运！

body
{
background: url(https://dl.dropboxusercontent.com/u/2665617/bootstrap/images/image1.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;   
background-position: 50% 50%;
height:100%;
}

html{
height:100%;
}

【讨论】：

【解决方案2】：

如果你不介意图像失真，你可以使用这个：

background-size: 100% 100%;

【讨论】：