I haven't looked at the code just posted nor have I gone yet to look at the site I linked to last night, but I did want to throw up condensed samples of the issue to illustrate the background cut-off problem.

The first example shows what happens in al browsers when you have ablock element set to 100% width. It will always be rendered at the width of the viewport and if you scroll horizontally you will see that it's been chopped. Understandable, but the CSS spec should have thought about this ahead of time and proposed a solution.

http://twistedmelon.com/testoverlap/test.html

The second example is the solution I'm using on the site I've linked to in the OP. I basically shift the div and then margin it back. This only works with relative positioning and the background image is prevented from causing the rendered page being abnormally wide by setting the overflow property to hidden. This is what's breaking in Firefox, IE8 and Opera.

http://twistedmelon.com/testoverlap/test2.html


All CSS in these examples is included within the HTML file and also written to the screen within PRE tags along with a description of the page and issues.