The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Recommendation


Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients.

Overview table

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


  • background-image: <image>
  • background-image: <image>, <image>, …
  • background-image: none


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

Any valid CSS image value, including image files through CSS images: url() or CSS gradients.

<image>, <image>, …
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.


Three simple div elements


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

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


The 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.


.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: linear-gradient(to bottom, #aaa, #eee);
  /* Here we are applying a linear gradient to our second block level container. */

.three {
  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. */

View live example


 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.


Internationalization topics related to the background-image property:

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

See also

Related articles


  • background-image

Other articles

External resources