I’m working on a site with a dark body background color. The foreground color is white. When pages load at average internet speeds, there’s a brief moment when users can’t see the content until more of the stylesheet loads. Given the typical user’s microsecond attention span, I’d like the background behind the content to be white.
I tried this with an image slightly smaller than the size of my content area:
background: #000 url( images/bg-white.png ) no-repeat center;
It didn’t work.
Any ideas would be appreciated. Thanks in advance!
But why are you using black as a background color when you want it to be white to begin with?
It’s bad practice to have two completely polar colors for your background as people without images will then not be able to read your text at all. You should make sure that people can read your content with images on or off.
Anyway, you have set your background image to not repeat itself and to be centered.
Make sure your image path is correct and change the CSS to:
background: #000 url(images/bg-white.png);
We could help you better if you gave us something to work with (live demo).
Hi Kohoutek,
Thanks for responding.
In my external stylesheet, the body background is a dark color, the html background color is white and the default text color is near-black.
If a user is viewing the site and can’t use stylesheets, the whole thing degrades to the standard white background with black text. A user who can’t view images would see the same brief load of the dark background that most users see right now.
I set my background image to no-repeat and center because I only want the white image to display behind the area where the content loads. I want the edges of the page outside the content to remain the dark color.
If I’ve misunderstood something, please feel free to let me know.
It’s difficult to see what is going wrongly without a link or code to work with.
So a user with images turned off will not be able to read the content if it’s dark on dark.
But it’s best we get to see your page (or a demo, or code) so that we can actually help you. 
Here you go:
http://knowledgehound.com/khhow2s/singbett.htm
It looks like there’s a way to do this in CSS3, but I’m still looking into it. I’d prefer a method that would work back to IE 7.
Hmm… I may be wrong here, but as I see it, it’s the Javascript that makes your site slow and the stylesheet doesn’t seem to load fully which is causing the lag.
When I disable Javascript, the page loads fine. You have Google Analytics in the head… Have you tried putting the script to the bottom and see if it changes anything?
This appears to answer my original question, but I’m still trying to get it to work correctly:
As for page load times, I tested using Firebug and loads.in. It seems that the slowdown is a result of the AdSense scripts. Obviously, we can’t remove them, so I’m not aware of any way to fix that particular problem.
The Analytics script doesn’t have much of an impact. That’s probably because we’re using the asynchronous code. Nothing would be gained by changing its location. More on that here:
We already use a Google Translate front end that doesn’t load most of the script until someone mouses over it. And the initial script is at the bottom of the page. We’ve stopped using DFP for Publishers scripts in favor of placing the ad scripts directly on the page, because they seem to load faster that way.
We use very few images, and most are under 8kb. I’ll be minifying my stylesheet once I figure out the answer to my background color question. That will help a little bit, but the AdSense scripts are still the main slowdown culprits. The only other javascript is hidden inside the Google Search code, and that also doesn’t seem to have much of an impact.
Any other thoughts you might have on improving page speed are welcome. I appreciate your time and effort.
As you said, it definitely isn’t a CSS issue, but very likely a loading issue. And if you can’t remove the culprit, then you’ll likely have to live with the lag.
The only other thing I can think of is that you try to speed up your site in general via some of the tips that are displayed in this and [URL=“http://developer.yahoo.com/performance/rules.html”]this article.
Wow, you’re fast! 
Those are both great links. I guess I’ll be combining scripts, which I’d been holding off on. (Messing with Google code makes me nervous. Unfortunately, we’re virtually hosted for now, so many of the other suggestions aren’t doable.
In case it helps anyone else reading this thread, here’s a great online front end for the YUI compressor. Super simple & fast!:
http://refresh-sf.com/yui/
Ok, here’s how to divide your page background into more than one color:
Solution #1: Create a 1500px by 1px PNG. (Only 4kb!) If you want a white background with colored edges, make the middle section white and the same width as you page. (990px in my case.)
body
{
position: relative;
width: 100%;
z-index: 0;
background: #fff url( images/background.png ) center repeat-y;
line-height: 1;
}
Solution #2: Build the colors in layers, with the base layer being white:
http://www.killersites.com/mvnforum/mvnforum/viewthread_thread,8906
Hope this helps someone out there!