html/css issue.. full width background without scroll

I have been struggling with this for the past hour and I was wondering if any of you had any thoughts on this..

A client needs a nice big background image on the site. I cannot used this image as a background for the body or any div because I don't want it to be cropped horizontally. If the browser's width is smalle开发者_JAVA百科r, the background should scale down.

So I just use an img tag with absolute positioning and z-index.

However(and this is where it gets tricky), the image is quite tall, and I don't want scroll bars on the side after the useful content.

Overflow=hidden on the body is useless because I do need scrollbars if the content is too much, but smaller that the image.

overflow=hidden on a div which has height,min-height and max-height set and contains the image just doesn't seem to work. I have no idea why.

And min-height, max-height and height is not working for the body tag either.

Any helpful ideas? I think this is doable by javascript, but I don't want to run a script every time the window is resized. I would prefer a html/css solution

PS: I have all browsers(opera, safari, ie8, firefox, chrome) open right now, and this is not just a browser issue.

I can't build a test case right now, but an absolutely fixedly positioned div with position: fixed; width: 100%; height: 100%; overflow: hidden and the image inside with width: 100% might do the trick. It will scale the image to the window's width, but won't create horizontal scroll bars.

The rest of the page may need a z-index to be displayed above the div.

Note that the body will have to have min-height: 100% for this to work.

position: fixed won't work in IE < 7.