TurkReno | Alabama Website Design, Hosting and Optimization

Whenever you specify a background image in your CSS, consider what happens if the image is missing. If there is text on top of the image, is it still readable? If not, specify a colour for the browser to use instead of the image so the text becomes readable again.

Why would an image be missing? A few possibilities are broken images, network problems, and user settings.

Here’s what the CSS could look like (long-hand used for clarity):

1. body {
2. color:#000;
3. background-color:#fff;
4. }
5. #my-element {
6. color:#fff; /* white */
7. background-image:url(my-blue-image.png);
8. background-color:#2f4b8e; /* blue */
9. }

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.