The bodies background which is a small gif image loads before the white content area backround....this issue seems pretty recent and did not occur in the past...
This is most likely because the gif image is now cached. Your page loads from the top down, the browser encounters the style first, then the <body> element, so the background image loads before the rest of the page renders.
Usually the problem is the other way around, which is a good case for preloading, but yes, I've recently encountered this and there are times when you want to NOT load up some elements until the page has fully loaded. And I have a workaround . . . but it involves Javascript. So consider your page without Javascript, if it still works and is legible, this may be a good solution. (See "untested alternate" below, may work without JS.)
Start by setting the initial style to white:
body { background:#fff; }
Now right after the CSS link line in the head, add a link to Javascript:
<link rel="stylesheet" type="text/css" href="your-current-style.css">
<script type="text/javascript" href="style-delay.js"></script>
The contents of style-delay.js would be something like this:
window.onload=function() { setBodyStyle(); }
//
// important to note: the below references the FIRST
// style sheet in the document, styleSheets[0]. If you
// have several style sheets linking from your document
// be sure to modify the LAST style sheet referenced,
// remembering arrays are zero based. So if it has multiple
// style sheets, the second one would be styleSheets[1],
// the third styleSheets[2], etc.
function setBodyStyle() {
// Non IE
if (document.styleSheets[0].cssRules) {
var oLength = document.styleSheets[0].cssRules.length;
// if it's just one direction of repeat, modify accordingly:
// background:url(/path-to/your-bg.gif) top left repeat-x;
document.styleSheets[0].insertRule('body { background:url(/path-to/your-bg.gif); }', oLength);
}
// IE
else if (document.styleSheets[0].rules) {
var newStyle = document.createStyleSheet();
newStyle.addRule('body' , 'background:url(/path-to/your-bg.gif);');
}
}
What is happening: window.onload() insures this bit is not executed until the entire document finishes loading.
After the style sheet is loaded, on full load of the document the default style sheet is appended to with a new style for body, which is why it's important it comes AFTER the link to the CSS. "Most browsers" and IE manipulate the style sheet object differently, hence the if/else if.
Untested Alternate: This too should work, and without Javascript. The down side is it requires a) a CSS link in an odd place, and I'm not sure if it will work (never done it,) or b) a CSS section inline with the document content, which I try to avoid.
Using the same concept, you want the entire document to load
before setting the background image. So you'd put a request for it at the end of the document, just before the closing body tag.
a) <link rel="stylesheet" type="text/css" href="set-body-image-only.css">
</body>
b) <style type="text/css">
body { background:url(/path-to/your-bg.gif); }
</style>
</body>
One of those three should be sufficient to delay the load of the image until the document loads.
