CSS Background positioning?

Discussion in 'Web Design and Development' started by londonweb, Oct 30, 2006.

  1. londonweb macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #1
    Hi guys

    I'm having success positioning my background image at the bottom right of the window by writing this:

    Code:
    body {
    background-position: bottom right;
    }
    
    I've no idea if this is even valid, but it works in every browser I've tested so far (even IE on windows), except Firefox. Being as FF is usually a more forgiving browser, I'm wondering if there is a better way of doing it.

    Any ideas?
     
  2. Stampyhead macrumors 68020

    Stampyhead

    Joined:
    Sep 3, 2004
    Location:
    London, UK
    #2
    Try switching the coordinates around so it reads like this:
    Code:
    body {
    background-position: right bottom;
    }
    I believe that's the standard way of writing it.
     
  3. londonweb thread starter macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #3
    hmmm...didn't make any difference for FF. Thanks for the suggestion though.
     
  4. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #4
    Add
    Code:
    html {
    	height: 100%;
    }
    
    to your CSS and Firefox will then use the bottom of the window, instead of the bottom of the content.

    p.s. the "bottom right" ordering in the first post is fine.
     
  5. londonweb thread starter macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #5

    Hey, that worked! And it's better than using body {height: 100%;} as I've tried in the past, because that way seems to produce vertical scrollbar in Safari. Thanks for the tip.
     
  6. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #6
    Yeah, once you get to the body, the canvas size is already baked in.

    Device independence was so much in the foreground when CSS came about, that defaults were maybe left a little too open-ended. It would have been nice if recommended defaults for the most common implementations were thrown in from the start, simple things like this shouldn't be so chancy.
     

Share This Page