Resize background image with css

andrew · Mister Road Rage Joined: 03 Feb 2002 Karma :

I was wondering if anyone on here could help. I'm making a webpage and want to know the best way to get the background image to scale to the size of the page.

The page i'm making is set to 1024x768 using javascript, but i'd like the background image to scale to the size of the window, basically if the visitor maximises the window the image needs to scale.

What is the best way to do this?

After doing a bit of reading i think this will be possible using javascript. Anybody got any ideas how to do it?

Thanks

andrew · Mister Road Rage Joined: 03 Feb 2002 Karma :

A rather ugly solution but here goes

<html>
<head>
<title>How to stretch a background image.</title>
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>

<body>


<div id="bg_image">
<img src="What Ever.jpg" style="width: 100%; height: 100%;">
</div>


<div id="contents">This is a test.</div>
</body>
</html>