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/

你会看到我也强迫身体和html元素的高度为100％，并且还集中了背景图像的定位。

IE9支持

background-size，IE8支持@ 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%;
}

Answer 2

如果您不介意图像扭曲，可以使用：

background-size: 100% 100%;

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

2 个答案: