Whenever you use an image as a background for your site, via CSS, you should check how your site appears if that image does not load, either because the file is missing, or the user has selected to turn off graphics in their browser (some people do this to ensure that pages load more quickly).
Different browsers have different default background colours, though most default to white. So if you’ve set a dark background image, with white text overlaid, and then that image does not load, you instantly have an unreadable website.
To get around this simply ensure that you set a background colour, before you set your background image (remember, stylesheets cascade, so order is important!)
To do this, simply edit your CSS to look like the following:
1 2 3 4 | #wrapper { background-color: #000; background: url("images/background.jpg") no-repeat; } |

Andrew A. Sailer
February 20th, 2010 at 03:29
Great post, going to send this link to my friends. Truly love it. THX.