Use a background image in your CSS? Remember to specify a backup colour.

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.

Posted on December 3, 2009 in Usability, CSS, Accessibility