I was trying to implement a background image which automatically resizes with the browser window. I was inspired by this lovely site: http://www.ringvemedia.com/. I googled out some solutions, however, none of them seemed to work just right. After few experiments, I arrived to this solution, which seems to be working so far:

UPDATE: also removed the scrollbars

body {
overflow-y: hidden ! important;
overflow-x auto ! important;
}

#background {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}

#content {
z-index: 2;
position: absolute;
}

#background img { width: 100%; }

<div id=”background”>
<img src=”images/bg1.jpg” />
</div><!– end #background –>

<div id=”content”>Lorem ipsum</div>

update: this solution is implemented at http://www.lachmani.cz/ – check it out!

Any better solutions out there? Any suggestions how to improve it?