I am having a problem with getting my back ground image to position correctly (at the bottom of the body).
I have made a very basic example . Please load the example in IE and FF. You will see IE puts it to the bottom of the body but FF and Opera do not ?

Any tips, suggestions ? I’m all ears.

Well not totally sure, but I think since the content doesn’t bring the height of the body down to the bottom of the viewport, that’s why the background is showing where it is in Firefox and Opera. If there was more content, it would bring the body down some.

Try adding this to the CSS

html{
height:100%;
}

That should guarantee that the height of the body matches the height of the viewport. Seemed to fix it in Fx and Opera. Didn’t hurt it in IE.

Not sure of the specs on this one, but most likely even tho IE is doing what you want, FX is probably doing it according to specs.

Remember that the viewport size changes with resolution. The problem wasn’t first evident at 800x600, since your content does fill that up, and the image appeared at the bottom then. Only when I resized to a larger resolution could I see what you were talking about.

It took some fiddle’n around but I got it to work
Usually It is IE. that doesn’t like to digest background shorthand. Like this other example I made a background tutorial from. However this time around around it was firefox (gecko engine et.al) that needed to be nursed into compliance.

I stand corrected.
This article about css shorthanding by Dustin Diaz is very good.
In the replies I posted a link to the examples I made.
Dustin responded with a correction to it.