全屏

给网页设置背景图片非常简单，但是当浏览器的宽高度变化之后，如何保证背景图片一直充满整个页面呢？比如像：http://www.lofter.com/。

实现方法

方法1：background-size:cover

background-size:cover是CSS3中才有的，下面做一个测试，先在body里面放一个div，然后给它加一些基本的样式：

div.bg{
	position:fixed;
	width:100%;
	height:100%;
	background:url(bg.jpg);
	background-size:cover;
}

使用background-size:cover的demo

方法2：javascript

很明显，并不是所有的浏览器都支持background-size:cover，所以，还需要JS还完成：

我们把HTML结构改一下，把图片放入HTML中：

<img src="bg.jpg" alt="" class="bigBg" />

先计算一下图片的宽高比：

$imgScale = $bigBg.innerWidth()/$bigBg.innerHeight();

然后定义个一个函数,这个函数中再计算出窗口(window)的宽高比，如果窗口的宽高比小于图片的宽高比，那说明此时窗口的高度大于图片的高度，这个时候只要将图片的高度设置成窗口的高度，宽度自适应就可以了，反之亦然：

function bgControl(){
	$winScale = $win.width()/$win.height();
	if($imgScale>$winScale){
		$bigBg.height($win.height());
		$bigBg.width("auto");

	}else{
		$bigBg.width($win.width());
		$bigBg.height("auto");
	}
}

最后在网页加载的时候和窗口缩放的时候调用bgControl()即可：

bgControl();
$win.resize(function(){
	bgControl();
});

JS控制全屏背景图Demo。