如今大背景图片布局越来越流行于各个网站，看效果，请参见网站： http://500px.com ，并请你缩放网页查看大背景图的变化，你会发现背景图片不会随网页的缩放而变小，最后像普通网页的大背景图一样在网页的空余地方露出白色区域，它而是出现一种类似自适应视窗大小背景图拉伸的效果。那么，这种css效果是如何做的呢？有几种方法呢？哪些方法有哪些兼容性问题呢？

哈，就目前我个人所知道的，有两种方法：css3和图片百分百宽高。

第一：css3，不支持ie6,7,8

说道CSS3，虽然它给网页带来了很多强大的网页效果，但是都是以牺牲浏览器为代价的。这种牺牲在中国以IE6为主导的尤为明显。但话说回来，毕竟凡事无绝对嘛。css3给我们提供了一个background-size这样一个属性：

background-size: length | percentage | auto ]{1,2} | cover | contain

background-size需要1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。我这里主要说background-size的cover和contain这两个特殊的定值。

cover: 保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；即背景图宽高都百分百铺满视窗或者div块。

contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；即背景图宽或者高只有一个属性百分百铺满视窗或者div块。

实例：

html, body {
    width: 100%;
    height: 100%;
} 
#demo { 
    width:100%; 
    height: 100%; 
    background: url(../images/bg.jpg) no-repeat; 
    background-size: cover(contain);
}

第二：图片百分百宽高 ，兼容所有浏览器

严格来说，这并不是css处理图片百分百显示的方法。而是使用html标签img的宽高百分百属性，然后页面的所有内容块都定位在这个图片上。而且是一种不错的方法，简单明了，兼容性也极好。

实例：

<style>
#demo{width:100%;height:100%;}
</stye>

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