css: position fixed backgrounds on document

[benneh]

Hi all,

I hope you guys can help me out.

I want to fit a large background image that's fixed on the document, so when you resize the browser window, the background doesn't shift depending on the window size. So in effect if you enlarge your window (or increase screen resolution), you see more of the image, and when you scroll down, the image doesn't scroll with it (remains up the top).

Is it even possible?

Another way I tried doing was absolute position the background image, but as result I get the horizontal bar, due to the div being a block (which I don't want).
I know if you margin-left:-9999px a div, it gets pushed out of the screen, but no scroll bar.. Is there a way to do it for the right side?

Any ideas? This is giving me a headache!

Thanks!

 

[angelwatt]

With the way you tried it, you can use the CSS overflow: hidden style to deal with that. I'd have to play with it to think up other ideas. Possibly setting the background to "scroll" and repeating-y. Maybe.

 

[benneh]

With the way you tried it, you can use the CSS overflow: hidden style to deal with that. I'd have to play with it to think up other ideas. Possibly setting the background to "scroll" and repeating-y. Maybe.

OH YES!! Thank you so much! That did the trick!!
Added a wrapping div, and with combination of min-width and overflow:hidden, it worked like a charm.

I shall remember this handy selector forever.

yay i can sleep tonight now. Thanks heaps!