PDA

View Full Version : Background question


buzz-killr-x
08-05-2002, 08:33 PM
Is there a way to take an image and full screen it for a background instead of filling the background with the image until its full? For example, in Windows, you can choose Stretch, Center or Tile for images as wallpaper. How would I use Stretch?

Gordo
08-05-2002, 10:15 PM
(KUDOS to QuietStorm)...
I'm too lazy to find this referenced elsewhere in these forums, so here's the code. I can't guarantee it'll work in all browsers. I know N6 doesn't like it.

<html>
<head>

<script language="JavaScript1.2">
NS4 = (document.layers);
IE4 = (document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "images/your-image.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>
<SCRIPT LANGUAGE="JavaScript1.2">
makeIm();
</SCRIPT>
</body>
</html>

welo
08-05-2002, 10:28 PM
Another way to solve this is to use a 100%x100% <div>, set your image in it and stretch it to 100%, then build the rest of your page on top of this inside another stretched <div>.