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):

body {
	color:#000;
	background-color:#fff;
}
#my-element {
	color:#fff; /* white */
	background-image:url(my-blue-image.png);
	background-color:#2f4b8e; /* blue */
}

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