background-image

W3C Recommendation

Summary

The background-image property allows you to apply one or more background images to an element. These can be url() paths to image files, or CSS3 linear or radial gradients. For more information, consult Using CSS background images and Creating gradients in CSS.

Overview table

Initial value	`none`
Applies to	All elements
Inherited	No
Media	visual
Computed value	As specified, but with URIs made absolute
Animatable	No
CSS Object Model Property	`backgroundImage`

Syntax

background-image: none
background-image: url(path/to/image.png)
background-image: linear-gradient(to bottom, #f00, #aaa)
background-image: radial-gradient(50% 50%, circle, #f00, #aaa)
background-image: url(path/to/image.png), url(path/to/image2.png), url(path/to/image3.png)

Values

none: Default. Color of the next parent through which the background is visible.

url(path/to/image.png): This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at CSS images: url().

linear-gradient(to bottom, #f00, #aaa): Programmatically creates a gradient that travels from one side of the element to the other. For more on the syntax, read Creating gradients in CSS.

radial-gradient(50% 50%, circle, #f00, #aaa): Programmatically creates a gradient that radiates outwards from a specified point on the element's background. For more on the syntax, read Creating gradients in CSS.

url(path/to/image.png), url(path/to/image2.png), url(path/to/image3.png): You can apply multiple background images to a single element (image files, gradients, or a mixture) by including all the image references in the property value, with each one separated by a comma. Images referenced earlier in the property value appear in front of images referenced later.

Examples

Three simple div elements

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Background-image example</title>
  <link href="background-image.css" type="text/css" rel="stylesheet">
</head>
<body>

  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>

</body>
</html>

View live exampleThe first div has a simple image file applied to it, the second div has a background gradient applied to it, and the third div has both applied simultaneously.

CSS

.one {
  background-image: url(images/icon.png);
  /* here we are applying a single background image to our first block level container element */
  /* (could be anything, but it is a div in the live example. */
}

.two {
  background-image: -webkit-linear-gradient(top,#aaa,#eee);
  background-image: -moz-linear-gradient(top,#aaa,#eee);
  background-image: -ms-linear-gradient(top,#aaa,#eee);
  background-image: -o-linear-gradient(top,#aaa,#eee);
  background-image: linear-gradient(to bottom,#aaa,#eee);
  /* Here we are applying a linear gradient to our second block level container. */
  /* We have included a line with each different vendor prefix type, so that all supporting */
  /* browsers will have something they can apply. This includes a prefixless version of the */
  /* property, which uses the latest version of the syntax for the spec. As browsers update their  */
  /* implementations and drop their prefixes, tyhey can start to use this syntax instead, meaning */
  /* that the code will still work. */  
}

.three {
  background-image: url(images/icon.png), -webkit-linear-gradient(top,#aaa,#eee);
  background-image: url(images/icon.png), -moz-linear-gradient(top,#aaa,#eee);
  background-image: url(images/icon.png), -ms-linear-gradient(top,#aaa,#eee);
  background-image: url(images/icon.png), -o-linear-gradient(top,#aaa,#eee);
  background-image: url(images/icon.png), linear-gradient(to bottom,#aaa,#eee);
  /* In this case we are applying both the background image and the gradient to our third block level container. */
}

Usage

Background images in general have good support across browsers; there are a few things to take note of, however:

Older browsers do not support multiple background images, SVG as background images or CSS gradients, so be careful when using these options to make sure that a fallback is provided that will make content readable on older browsers, such as a simple solid colour.
When using multiple background images, the image at the start of the comma delimited list appears on top of ones later on. This might seem contrary to how CSS is expected to behave.
Because gradients are still supported in some browsers with prefixes and some not, and some with a slightly older syntax, you should use multiple background gradient properties with different syntaxes, as shown in the below examples.

Related specifications

Specification	Status	Related Changes
CSS 2.1	W3C Recommendation
CSS Backgrounds and Borders Module Level 3	W3C Candidate Recommendation	Multiple background images can be specified on the same element

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	1.0	1.0	4.0	3.5	1.0
Multiple backgrounds	1.0	3.6	9.0	9.0	1.0
SVG background images	8.0	4.0	9.0	9.5	4.0
Gradients	8.0 -webkit	4.0 -moz	10.0 -ms	12.10 11.0 -o	4.0 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	1.0	3.8	18.0	1.0	6.0	7.0	4.0	1.0
Multiple backgrounds	1.0	3.8	18.0	1.0	8.0	8.5	5.0	1.0
SVG background images	1.0	3.8	18.0	?	8.0	10.0	6.0	1.0
Gradients	1.0 -webkit	3.8 -webkit	18.0 -webkit	1.0 -moz	8.0 -ms	12.0 11.0 -o	Unsupported	1.0 -webkit

Compatibility notes

Browser	Version	Note
Internet Explorer	< 9.0	Doesn't support SVG for background-images, or multiple background images, or gradients.
Internet Explorer	< 10.0	Doesn't support gradients.
Various		Not all browsers support animation of background images. Recent -webkit- based browsers transition between background images by cross fading.

Search

background-image

How to Use

background-image

Summary

Overview table

Syntax

Values

Examples

Usage

Related specifications

Compatibility

Desktop

Mobile

Compatibility notes

See also

Related articles

Background

Other articles

External resources