php背景图片随页面大小改变,固定网页背景图同时保持图片比例的思路代码

提供一个背景图片策略：

1，背景图片固定

2，随窗口大小改变而改变大小

3，保持比例不变而缩放

支持浏览器:IE 6,7,8,9+ ,FF,Chrome

演示地址：http://www.einino.net/bg_image.html

body{margin:0; padding:0;height:2000px; }

#background_img{

top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/

}

/**

*@desc make a fixed background image. resize the image to fit the window size besides do not lost the image's proportion

*@author EI Nino

*2013/8/15

*/

var imgBackground=function(_img_obj)

{

this.img = _img_obj;

this.init();

}

imgBackground.prototype={

init:function(){

this.img.style.top="0";

this.img.style.left="0";

if(navigator.appVersion.indexOf('MSIE 6.0')>0){

this.img.style.position="absolute";

this.img.style.bottom="auto";

if(!document.body.style.backgroundImage){//esacpe the flash when scroll the window in IE 6

document.body.style.backgroundImage="url(about:blank)";

document.body.style.backgroundAttachment="fixed";

}

}

else{

this.img.style.position="fixed";

}

this.ra = this.img.width/this.img.height;

this.resize();

this.BindEvent();

},

resize:function() {

var self=this;

if((document.documentElement.clientWidth /document.documentElement.clientHeight )>=self.ra)

{

self.img.style.width=document.documentElement.clientWidth+"px";

self.img.style.height="";

}

else{

self.img.style.width="";

self.img.style.height=document.documentElement.clientHeight +"px";

}

},

GetStyle:function(_obj,_style){

var obj = _obj;

return obj.currentStyle? obj.currentStyle[_style] :window.getComputedStyle(obj, null)[_style];

},

BindEvent:function(){

var self = this;

$(window).resize(function(){//use jquery lib

self.resize();

});

}

};

new imgBackground(document.getElementById("background_img"));