固定网页背景图同时保持图片比例

提供一个背景图片策略：

1，背景图片固定

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

3，保持比例不变而缩放

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

 
<style>  
body{margin:0; padding:0;height:2000px; }  
#background_img{  
    top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/  
}  
</style>  

<style>
body{margin:0; padding:0;height:2000px; }
#background_img{
	top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/
}
</style>





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

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

补充：web前端 , JavaScript ,