Markup:
<body>
<div id="container">
This is the content area, that will contain all the elements you want
positioned above the background.
</div>
<img src="foo.png" id="background" alt="" />
</body>
|
CSS:
#container {
position: relative;
z-index: 2;}
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
|
Resizing the page will not resize the image in some browsers but it will size properly on load in most browsers.
You need to use a high-resolution image:
- larger high-re images scale down better than smaller high-res images scale up.
You can also use just html to put the image inline with a width of 100% but I don't think that will work with an xml doctype.
Edited by dpyers - 20 May 2006 at 1:04pm
Topic Options
Post Options
Thanks(0)
