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.
- Previous post: HTML 5 syntax
- Next post: Safari, WebKit and alt text for missing images