CSS Reference Property

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.

Official Syntax

  • Syntax:

    background-image: <image> | none
                            
  • Initial: none
  • Applies To: all elements
  • Animatable: no

Values

<image>
An <image> to be set as a background. Multiple comma-separated images can be defined.
none
No background image is applied. If one has been set before, it will be removed.

Examples

Some examples specifying background images:

body { 
    background-image: url("marble.svg");
}
/* SVG format example */

p { 
    background-image: none; 
}

.multiple-bgs { 
    background-image: url(first.png), url(second.png);
}
/* multiple background images are usually in PNG format 
with transparent areas so that the other backgrounds 
can show through */

The following sets the background image of all elements of class .module elements to a subtle pattern that is tiled and repeated using the background-repeat property to fill the entire element’s background area.

.module { 
    background-image: url(pattern.png);
    background-repeat: repeat;
} 
                

Live Demo

The following live demo shows examples on how to use the property:

View this demo on the Codrops Playground

Browser Support

Basic Support: The property is supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

SVG in CSS backgrounds

Method of using SVG images as CSS backgrounds

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 5
  • 24
  • 9
  • 9.5
  • 5

Mobile / Tablet

  • 4.2
  • 3
  • all
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

CSS3 Multiple backgrounds

Method of using multiple images as a background

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4
  • 3.6
  • 9
  • 10
  • 3.1

Mobile / Tablet

  • 3.2
  • 2.1
  • all
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Note that browsers that don’t support multiple backgrounds might completely ignore the declaration and render no background image at all. When support for older browsers (for example, IE8) is needed, you can use the Modernizr library that will allow adding a fallback rule, or CSS3 Pie that will provide a polyfill. An example for using Modernizr to add a fallback is the following:

.element { 
    background-image: url(first.png), url(second.png);
}

/* fallback for browsers that don't support multiple background image values */
.no-multiplebgs .element {
    background-image: url(fallback.jpg);
}

Modernizr adds a class to the html element which allows to specify these kind of fallback rules.

Written by

Last updated December 11, 2016 at 10:15 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.