background-image

< css‎ | properties
Jump to: navigation, search

background-image

This article is Ready to Use.


W3C Recommendation

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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
4.0
Yes
3.5
Yes
1.0
Yes
Multiple backgrounds
1.0
Yes
?
Unknown
9.0
Yes
?
Yes
1.3
Yes
Gradients
1.0
prefix
?
Unknown
10
Yes
?
Unknown
4.0
prefix
SVG images
8.0
Yes
?
Unknown
9.0
Yes
9.5
Yes
5.0
Yes
element()
?
Unknown
?
prefix
?
none
?
none
?
none
image-rect()
?
none
?
prefix
?
none
?
none
?
none
Any <image> value.
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown

Mobile

FeaturesAndroid BrowserOpera MiniOpera MobileiOS Safari
Basic support
?
Yes
?
Yes
?
Yes
?
Yes
Multiple backgrounds
?
Yes
?
Yes
?
Yes
?
Yes
Gradients
?
Unknown
?
Unknown
?
Unknown
?
Unknown
SVG images
?
none
?
Yes
?
Yes
?
Partial support
element()
?
Unknown
?
Unknown
?
Unknown
?
prefix
image-rect()
?
none
?
none
?
none
?
prefix
Any <image> value
?
Unknown
?
Unknown
?
Unknown
?
none


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: 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. */
}

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

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







  • background-image









Other articles

External resources