在切图的时候，经常会有的网采用全屏的背景设计，这种设计很好看，现在也采用的比较多，但是切图时候，怎么能让全屏背景在不同分辨率下都按等比缩放呢？这个是一个看似简单其实很复杂的问题，下面提供了5种方法可以供你选择，不过切图网www.qietu.com 采用的更多的方法是第一种，利用css3的backround-size：cover； 来解决，这种对浏览器要求比较高，可以供参考。

很多网站是全背景图片的，而且适应各种主流分辨率，蓝狮注册给人一种干净大气的感觉，实属设计派的一个耍酷良方，下面介绍几种实现全屏图片自适应缩放背景图片的方法。

1.帅气简单的CSS3方法

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.只使用CSS之方法一

img.bg {

/* Set rules to fill background */

min-height: 100%;

min-width: 1024px;

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

img.bg {

left: 50%;

margin-left: -512px; /* 50% */

}

}

以下浏览器的任何版本: Safari / Chrome / Opera / Firefox

IE 6: （各种方案奈我何？！）

IE 7/8: 大部分工作，蓝狮官网小屏幕的时候全屏，但是不是居中

IE 9: 没问题

3.只使用CSS之方法二

bg {

position:fixed;

top:-50%;

left:-50%;

width:200%;

height:200%;

}

bg img {

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

min-width:50%;

min-height:50%;

}

Safari / Chrome / Firefox

IE 8+

Opera

4.jQuery方法

bg { position: fixed; top: 0; left: 0; }

.bgwidth { width: 100%; }

.bgheight { height: 100%; }

$(window).load(function() {

var theWindow = $(window),

$bg = $(“#bg”),

aspectRatio = $bg.width()/$bg.height();

function resizeBg() {

if ( (theWindow.width()/theWindow.height()) $bg

.removeClass()

.addClass(‘bgheight’);

}else{

$bg

.removeClass()

.addClass(‘bgwidth’);

}

}

theWindow.resize(function() {

resizeBg();

}).trigger(“resize”);

});

IE7+

任何除了IE的浏览器的任何版本

5.jQuery插件

Github项目地址：https://github.com/srobbin/jquery-backstretch

使用方法：

资料来源：http://css-tricks.com/perfect-full-page-background-image/