Blog

Posts tagged with “IE6” and “HTML”

CSS Resizable "Background" Image Technique

Resize this page. The background will remain the same width as the window. The technique uses an actual image tag and its own fixed position div wrapper to pull off the effect. This will probably make semantic-web nazis' heads explode, but at least it doesn't use tables. The image will remain at the top of the page however, so having the image end in a single color at the bottom, matched by a similar color for the body background would probably finish this off quite nicely. If you need the image to center, use the tables technique linked above. Here's the basic CSS to pull this off in IE7, IE8, Firefox, Safari, Opera and Chrome:

HTML {
height:100%;
width:100%;
}
BODY {
min-height:100%;
width:100%;
margin:0;
padding:0;
}

#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
#bgimg {
width:100%;
}

And this is all the HTML you need to add to the top of the page (above any "wrapper" div you may be using):

<div id="bg">
<img id="bgimg" src="[URL_TO_YOUR_IMAGE]"
alt="background image" width="0" />
</div>

To find out how to make this work in IE6, look at the source code of The Demo page

Tags: , ,
2009.08.21 11:14 PM | Permalink 0 Comments