CSS Background positioning?

[londonweb]

Hi guys

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


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?

[Stampyhead]

Try switching the coordinates around so it reads like this:
body {
background-position: right bottom;
}
I believe that's the standard way of writing it.

[londonweb]

hmmm...didn't make any difference for FF. Thanks for the suggestion though.

[iMeowbot]

Add

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.

[londonweb]

Add

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.


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.

[iMeowbot]

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.