Idea code for fixing the background image of a web page while maintaining the proportions of the image_javascript skills

Provide a background image strategy:

1, the background image is fixed

2, the size changes as the window size changes

3, the proportion remains unchanged And zoom

supports browsers: IE 6, 7, 8, 9, FF, Chrome

Demo address: http://www.einino.net/bg_image.html

Copy code The code is as follows:

Copy code The code is as follows:

/**
*@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"));