html img和背景图处理图片不拉伸_拉伸背景图片的方法，CSS+html+jquery,不需要大图片...

今天有个同事问我怎么拉伸背景图片，一直没有想过这个问题，既然被人家问倒了，就得学习研究一番了。因此我总结了三个拉伸背景图片的方法，结合了CSS+html+jquery三个技术，不需要很大的图片，不过拉伸后图片会有失真，如果你的网站背景图片要求不是很真很清晰，可以参考哦。

方法一：CSS方法，这个方法有个缺陷，就是要定死高度，而且不兼容IE。

无标题文档

body{width:100%; height:700px; margin:0; url(p_w_picpaths /banner11.jpg) no-repeat; padding:0; background-size:100% 100%;) ;

}

拉伸背景图片

方法二：jquery+CSS,都兼容

无标题文档

body{width:100%; height:100%; margin:0; padding:0;}

$(function(){

$("body").append("

");

$("#main_bg").append("");

cover();

$(window).resize(function(){//浏览器窗口变化

cover();

});

});

function cover(){

var win_width=$(window).width();

var win_height=$(window).height();

$("#bigpic").attr({width:win_width,height:win_height});

}

方法三：html+css,这是个死办法，呵呵，但是兼容性很好。

无标题文档

body{width:100%; height:100%; margin:0; padding:0;}

#main_bg,#bigpic{width:100%; height:100%;}