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

 

 

提供一个背景图片策略：

1，背景图片固定

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

3，保持比例不变而缩放

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

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

 

<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"));