CSS background-image

The CSS background-image property is used to set the background image of an element.

By default, if a background image is smaller than its containing box, it will repeat both horizontally and vertically until it fills up the box. You can change this behavior with the background-repeat property. You can also use other properties, such as background-size and background-position to adjust the image as required.

Also, the background-image property allows you to specify more than one image. When specifying multiple images, the first one specified appears on top (closest to the user), with each subsequent image drawn behind the previous one.


background-image: <bg-image> [ , <bg-image> ]*


<bg-image> = <image> | none

Possible Values

This specifies the image to display. It can be any valid image data type.
Specifies that no image is to be displayed.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
Applies To
All elements

Example Code

/* Single image */
background-image: url("/pix/smile.png");

/* Multiple images */
background-image: url("/pix/samples/bg1.png"), url("/pix/samples/bg2.png");

Official Specifications