background-image property

Specifies the background image or images of the object.

CSS Backgrounds and Borders Module Level 3, Section 3.3CSS 2.1, Section 14.2.1



background-image: none | <image> | <function> [ , none | <image> | <function> ]*

Property values

One or more of the following values, separated by commas:


Initial value. This value adds an image layer but draws nothing.


Location of the background image(s), in the form "url(sUrl)" where sUrl is an absolute or relative URL.


Function, such as a gradient, that generates an image.

CSS information

Applies ToAll elements
Initial Valuenone

Standards information


The URL identifies the image file. When setting a background image, you can set a background color to use when the image is unavailable. When the image is available, it overlays the background color.

This property can be set with other background properties by using the background composite property.

Starting in Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-background-image" as an alias for this property.


This example uses background-image and background-color to create three div objects with the same width and height but different background images and colors.

div {
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  float: left;
  margin-right: 10px;
.circle {
  background-color: aqua;
  background-image: url(circle.png);
.square {
  background-color: aquamarine;
  background-image: url(square.png);
.triangle {
  background-color: bisque;
  background-image: url(triangle.png);

   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>

The following image shows the result:

An image showing three div objects with the same width and height but different background-image and background-color settings.

See also




© 2014 Microsoft