使用全屏背景的网页设计欣赏 & 全屏网页背景教程

3月 6, 2013 发表于: HTML & CSS, 设计作品. 评论 (3)

Sponsor

全屏的大背景网站之前分享过不少，这是2012年以及2013年的设计趋势，适合用全屏背景的网站有很多，比如摄影类、建筑类、餐厅美食行业等等。全屏背景不仅仅是一些插画及设计图，也可以是真实的摄影图，当然也要控制好图片的大小了。

全屏网页背景教程
全屏背景的网页设计欣赏

下面设计达人将会教大家如果设置全屏背景以及分享一些全屏背景的网页设计案例。

方法1：利用CSS样式让背景全屏于整个网页

利用CSS是非常方便的一种方法，缺点就是要IE9以上才能支持。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

兼容性：

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+
Firefox 3.6+

方法2：使用jQuery

这个方法是不错的，兼容IE7+ 如果制作中文站，哪么推荐大家使用jQuery这个方法。

HTML代码：

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

CSS代码：

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery代码：

$(window).load(function() {    

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();
	    			    		
	function resizeBg() {
		
		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}
					
	}
	                   			
	theWindow.resize(resizeBg).trigger("resize");

});

兼容：