Definition and Usage
The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.
How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.
If a specified image cannot be drawn (for example when the file denoted by the specified URI cannot be loaded), browsers handle them as if it was the none value.
Note: Web developers should always specify a background-color, even if the images are opaque and the color won’t be displayed in normal circumstances; if the images cannot be loaded – for instance, when the network is down – the background color will be used as a fallback.
- Initialnone
- Applies toall elements
- Inheritedno
- Mediavisual
- Computed Valueas specified, but with URIs made absolute
- Animatableno
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <bg-image>#
background-image: none
background-image: url(http://www.example.com/images/bck.png)
background-image: inherit
Values
- none
- Is a keyword denoting the absence of images.
- <image>
- Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
Examples
2 | background-image: url("images/darkpattern.png"); |
5 | background-image: url("images/foo.png"), url("images/bar.png"); |
8 | background-image: none; |
Compatibility
Desktop browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 |
| Multiple backgrounds | 1.0 | 3.6 (1.9.2) | 9.0 | yes | 1.3 |
| Gradients | 1.0-webkit | 3.6 (1.9.2)-moz | 10 | 11+-o | 4.0-webkit |
| SVG images | 8.0 | 4.0 (2.0) | 9.0 | 9.5 | 5.0 |
element() | NA | (Yes)-moz | Not supported | Not supported | Not supported |
image-rect() | Not supported | (Yes)-moz | Not supported | Not supported | Not supported |
Any <image> value. | NA | Not supported | NA | NA | NA |
Mobile browsers
| Feature | iOS Safari | Opera Mini | Opera Mobile | Android Browser |
| Basic support | yes | yes | yes | yes |
| Multiple backgrounds | yes | yes | yes | yes |
| Gradients | yes -webkit
old webkit syntax for iOS 4.2 and older | NA | NA | yes-webkit
old webkit syntax |
| SVG images | yes | yes | yes | Not supported |
element() | (Yes)-moz | NA | NA | NA |
image-rect() | (Yes)-moz | Not supported | Not supported | Not supported |
Any <image> value | Not supported | NA | NA | NA |
