css - 调整窗口大小时设置背景图像

Question

我正在尝试在我的 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;   
}

Answer 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%;
}