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-position to adjust the image as required.
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
- 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
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.
- Initial Value
- Applies To
- All elements
/* Single image */ background-image: url("/pix/smile.png"); /* Multiple images */ background-image: url("/pix/samples/bg1.png"), url("/pix/samples/bg2.png");
- 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)