Menu
Hi there,
After much searching, I have found two ways of auto-resing bg image, according to browser size.
One way uses Javascript, the second way uses Css.
However,
In the first, javascript way, the script is old and supports only IE.
The second CSS way, supports all browsers.
[B]My problem in both ways
[B]…
<img src=”newimage1.jpg” width=”100″ height=”100″ onclick=”changebg(this.src)”/>
<img src=”newimage2.jpg” width=”100″ height=”100″ onclick=”changebg(this.src)” />
[B]…
I write below both ways.
Can somebody help?
Thank you
——————– [B][U]Javascript Way
<HEAD>
<SCRIPT LANGUAGE=”JavaScript1.2″>
<!–
NS4 = (document.layers);
IE4 = (document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = “boat1.jpg”;
if (NS4) window.onload = setResize;
function setResize(){
setTimeout(“window.onresize=reDo;”,500);
}
function reDo(){
window.location.reload()
}
if (IE4) window.onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;
}
function makeIm() {
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = “<DIV ID=elBGim”
+ ” STYLE=’position:absolute;left:0;top:0;z-index:-1′>”
+ “<IMG NAME=’imBG’ BORDER=0 SRC=” + imSRC;
if (scaleWidth) imStr += ” WIDTH=” + winWid;
if (scaleHeight) imStr += ” HEIGHT=” + winHgt;
imStr += “></DIV>”;
document.write(imStr);
}
//–>
</SCRIPT>
</HEAD>
<BODY MARGINHEIGHT=0 MARGINWIDTH=0>
<SCRIPT LANGUAGE=”JavaScript1.2″>
<!–
makeIm();
//–>
</SCRIPT>
<img src=”newimage1.jpg” width=”100″ height=”100″ onclick=”changebg(this.src)”/>
<img src=”newimage2.jpg” width=”100″ height=”100″ onclick=”changebg(this.src)” />
</body>
</html>
————————– [B][U]Css Way
<head>
<title>Background to fit screen</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<meta http-equiv=”Imagetoolbar” content=”no”>
<style type=”text/css”>
/* pushes the page to the full capacity of the viewing area
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image
#content {position:relative; z-index:1;}
</style>
<!–[if IE 6]>
<style type=”text/css”>
/* some css fixes for IE browsers
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]–>
<script language=”javascript” type=”text/javascript”>
function changebg(my)
{
document.getElementById(“bg”).style.backgroundImage =’url(‘+ my.src +’)’;
}
</script>
</head>
<body>
<div id=”bg”><img src=”tes_images/boat1.jpg” width=”100%” height=”100%” alt=””></div>
<div id=”content”>
<img src=”newimage1.jpg” width=”100″ height=”100″ onclick=”changebg(this.src)”/>
<img src=”newimage2.jpg” width=”100″ height=”100″ onclick=”changebg(this.src)” />
</div>
</body>
</html>
Javascript Way source : [url]http://www.webreference.com/dhtml/diner/bgresize/
Css ways source : [url]http://www.htmlite.com/faq022.php