The background-image
CSS property sets one or more background images on an element.
The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is 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 it as they would a none
value.
background-color
. If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.Syntax
Each background image is specified either as the keyword none
or as an <image>
value.
To specify multiple background images, supply multiple values, separated by a comma:
background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png');
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.
Accessibility concerns
Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
- MDN Understanding WCAG, Guideline 1.1 explanations
- Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Formal definition
Initial value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Computed value | as specified, but with <url> values made absolute |
Animation type | discrete |
Formal syntax
<bg-image>#where
<bg-image> = none | <image>
where
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
where
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where
= ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] | [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>where
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>
Examples
Layering background images
Note that the star image is partially transparent and is layered over the cat image.
HTML
<div> <p class="catsandstars"> This paragraph is full of cats<br />and stars. </p> <p>This paragraph is not.</p> <p class="catsandstars"> Here are more cats for you.<br />Look at them! </p> <p>And no more.</p> </div>
CSS
p { font-size: 1.5em; color: #FE7F88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'background-image' in that specification. |
Candidate Recommendation | From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any <image> CSS data type. |
CSS Level 2 (Revision 1) The definition of 'background-image' in that specification. |
Recommendation | From CSS1, the way images with and without intrinsic dimensions are handled is now described. |
CSS Level 1 The definition of 'background-image' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-image | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
4
| Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
element() | Chrome No support No | Edge No support No | Firefox
Full support
4
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
4
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Gradients | Chrome
Full support
1
| Edge Full support 12 | Firefox
Full support
3.6
| IE Full support 10 | Opera
Full support
11
| Safari
Full support
4
| WebView Android
Full support
≤37
| Chrome Android
Full support
18
| Firefox Android
Full support
4
| Opera Android
Full support
14
| Safari iOS
Full support
3.2
| Samsung Internet Android
Full support
1.0
|
image-rect() | Chrome No support No | Edge No support No | Firefox
Full support
4
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
4
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
image-set() | Chrome
Full support
21
| Edge
Full support
79
| Firefox
No support
No
| IE No support No | Opera
Full support
15
| Safari
Partial support
6
| WebView Android
Full support
4.4
| Chrome Android
Full support
25
| Firefox Android
No support
No
| Opera Android
Full support
14
| Safari iOS
Partial support
6
| Samsung Internet Android
Full support
1.5
|
Multiple backgrounds | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.6 | IE Full support 9 | Opera Full support 10.5 | Safari Full support 1.3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
SVG images | Chrome Full support 8 | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9.5 | Safari
Full support
5
| WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS
Full support
5
| Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Implementing image sprites in CSS
<img>
- Image-related data types:
<image>
,<gradient>
- Image-related functions:
linear-gradient()
,radial-gradient()
,repeating-linear-gradient()
,repeating-radial-gradient()
,element()
,image()
,image-set()
,url()