css: position fixed backgrounds on document

Discussion in 'Web Design and Development' started by benneh, Jan 22, 2008.

  1. benneh macrumors member

    Oct 20, 2006
    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!

  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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.
  3. benneh thread starter macrumors member

    Oct 20, 2006
    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! :)

Share This Page