This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

background-image

Summary

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

Syntax

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

Values

none
Default. Color of the next parent through which the background is visible.
<image>
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.

Examples

Three simple div elements

<!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>

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

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.

Notes

Internationalization topics related to the background-image property:

Related specifications

CSS 2.1
W3C Recommendation
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation

See also

Related articles

Background

Other articles

External resources