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

Where:

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

Example Code

Official Specifications

• CSS Backgrounds and Borders Module Level 3 (W3C Candidate Recommendation 9 September 2014)
• CSS Level 2.1 (W3C Recommendation 07 June 2011)
• CSS Level 1 (W3C Recommendation 17 Dec 1996)