how to set background image not to scroll up/down with the scroll bar

Discussion in 'CSS' started by mz906, Jun 29, 2008.

0
  1. #1
    I can't seem to figure this one out, i've seen it done before.

    an image is scrolled as the background of the body which is seperate from the main content, when the user scrolls up and down the background image stays in the same spot and only the main content scrolls up/down.

    here's a sample:
    http://clagnut.com/
     
    mz906, Jun 29, 2008 IP
  2. mz906

    mz906 Peon

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i think i figured it out, but would like to know if this is the best way to do it ;)

    
background-attachment:fixed;
background-position:center;
overflow:auto;
    Code (markup):
     
    mz906, Jun 29, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The only part affecting the scrollz is the position: fixed. If you don't state a background-position, the default is "scroll".

    IE6 has serious issues with this. It only gets it to work when the image is on the body, nowhere else.

    You want:
    background: color url(image.gif) center center fixed;

    Saying "center" only once is supposed to work according to the specs, but IE really wants you to state both the horizontal and the vertical most of the time... by the specs, if you only state one value, the second value should be "center" by default.

    This is a repeating image... a background tile? Just make sure it is faded enough not to interfere with the readability of the text : )
     
    Stomme poes, Jun 29, 2008 IP