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.

Syntax

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

Where:

<bg-image> = <image> | none

Possible Values

image
This specifies the image to display. It can be any valid image data type.
none
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:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
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
none
Applies To
All elements
Inherited?
No
Media
Visual

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