背景图片自适应浏览器大小
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>背景图片自适应浏览器大小</title>
<script type=”text/javascript”>
window.onresize = window.onload = function(){
var w,h
if(!!(window.attachEvent && !window.opera))
{
h = document.documentElement.clientHeight;
w = document.documentElement.clientWidth;
}else{
h = window.innerHeight;
w = window.innerWidth;
}
document.getElementById(‘container’).value =’窗口大小：’ + ‘’ + w + ‘; height:’+h;
var bgImg = document.getElementById(‘bg’).getElementsByTagName(‘img’)[0];
bgImg.width = (w);
bgImg.height= (h) ;
}
</script>
<style type=”text/css”>
*html#container{background:url(../images/bg2.gif) no-repeat; 100%; min-height:1000px; height:auto !important; height:1000px;}
#bg{position:fixed;top:0px;left:0px;z-index:-999;}
.login{margin:0 auto; 100%; height:420px; position:absolute; top:15%;}
.logo{margin:0 auto; 450px; height:36px; background:url(../images/logo.png) no-repeat;}
.login_ct{background:#666; height:323px; margin-top:50px;}
.login_form{681px; height:323px; background:#CCC; margin:0 auto;}
</style>
</head>
<body>
<div id=”container”>
<div id=”bg”><img src=”images/bg2.gif” width=”1920″ height=”1080″ />
</div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>