CARVIEW

MOTORHOMES

Select Language

HTTP/2 301 server: GitHub.com content-type: text/html location: https://webplatform.github.io/docs/css/properties/background-image/ access-control-allow-origin: * expires: Thu, 16 Oct 2025 01:01:42 GMT cache-control: max-age=600 x-proxy-cache: MISS x-github-request-id: B1E7:7BCCA:C75C:131BA:68F0419E accept-ranges: bytes age: 0 date: Thu, 16 Oct 2025 00:51:43 GMT via: 1.1 varnish x-served-by: cache-bom-vanm7210097-BOM x-cache: MISS x-cache-hits: 0 x-timer: S1760575903.778554,VS0,VE287 vary: Accept-Encoding x-fastly-request-id: 70e81249b31911808e8f1241952b05014df09b97 content-length: 162 HTTP/2 200 server: GitHub.com content-type: text/html; charset=utf-8 last-modified: Thu, 09 Jan 2020 08:57:10 GMT access-control-allow-origin: * etag: W/"5e16eae6-33c2" expires: Thu, 16 Oct 2025 01:01:43 GMT cache-control: max-age=600 content-encoding: gzip x-proxy-cache: MISS x-github-request-id: 4EF1:218C74:CBFA:13651:68F0419E accept-ranges: bytes age: 0 date: Thu, 16 Oct 2025 00:51:43 GMT via: 1.1 varnish x-served-by: cache-bom-vanm7210097-BOM x-cache: MISS x-cache-hits: 0 x-timer: S1760575903.079437,VS0,VE286 vary: Accept-Encoding x-fastly-request-id: 6a11273cdc1ca88b03b635d56f200892dfd119ae content-length: 3707 background-image · WebPlatform Docs

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:

Preparing for text expansion

Related specifications

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

background-image

Summary

Overview table

Syntax

Values

Examples

Usage

Notes

Related specifications

See also

Related articles

Background

Other articles

External resources