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 Accessibility, CSS, Usability

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.