background-image

The background-image property sets the background image of an element. It accepts one image value, or multiple comma-separated values.

When more than one background image is set, each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties. The images are then stacked on top of each other, with the first specified being on top of the others, so it is drawn as if it is the closest to the user.

Most of the times, when multiple background images are used, most of them will have transparent areas so that the other background images can show through. See the demo below for an example.

When setting a background image, the CSS author should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. Any borders specified on the element are drawn on top of the backgrounds. So it is: background color at the bottom, images stacked above it, and borders on top of all those.

How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

Each image creates a “layer” inside the element. Even the value none creates a layer; it counts as an image layer but draws nothing on that layer.

An image that is empty (zero width or zero height), or that fails to download, or that cannot be displayed (e.g., because it is not in a supported image format) also counts as an image layer but draws nothing.

Trivia and Notes

For accessibility reasons, a developer should not use background images as the sole method of conveying important information. Images are not accessible in non-graphical presentations (for example, to screen readers), and background images specifically might be turned off in high-contrast display modes.

The background-image property provides a way to include images in the document with CSS without any reference in the HTML code. Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information.

Also note that when using a background image on an element that has some text, you should make sure that the color of the text is not too similar to, or the same as the background color of that element. The text, even though it might be readable with the image as background (i.e. white text on dark picture), has to be readable without it, in case background images are not displayed.

Nonetheless, some developers sometimes use this property in conjunction with the text-indent property in image-replacement techniques to hide text (mostly headings) and show a graphical representation of that text in its place. One of the techniques that serves as a good example for a semantic and accessible way of replacing an image is by Scott Kellum and you can read more about it in the article Replacing the -9999px hack (new image replacement) on Jeffrey Zeldman’s website.