getting class elements to stay in relation with background

Nomi, to center the body BG image replace "left top"
with "center top" in the body declaration.

If you need the page elements to stay covering the
image exactly as now, wrap all the elements other
than the body element in a div, give that div a width
the same as the BG image, and center it with:

body {
text-align: center;
}

div#wrap {
margin: 0 auto;
text-align: left;
}

This second rule works in modern browsers, and
the first rule is a hack to make IE5.x/win center
the div. The "text-align: left;" resets the effect of
the hack to the default so it won't inherit into the
entire page.

IE5.x/win ignores side auto margins, but wrongly
applies the text-align to all elements, and not just
inline ones like text. Other browsers just ignore
the hack as a non-applicable rule.

This method may still leave black areas, but they will
be distributed equally to the sides.
HTH

nice one! Thanks John.