网页背景图片自适应浏览器大小

背景图片自适应浏览器大小

 
<!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  =’窗口大小:’ + ‘width:’ + 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; width:100%;  min-height:1000px; height:auto !important; height:1000px;}

#bg{position:fixed;top:0px;left:0px;z-index:-999;}

.login{margin:0 auto; width:100%; height:420px; position:absolute; top:15%;}

.logo{margin:0 auto; width:450px; height:36px; background:url(../images/logo.png) no-repeat;}

.login_ct{background:#666; height:323px; margin-top:50px;}

.login_form{width: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>

 

你可能感兴趣的:(浏览器)