CSS `background-image` Property

Example

Set the background image for the body element:

body
{
    background-image:url('paper.gif');
    background-color:#cccccc;
}

The background-image property sets one or more background images for an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Default value:	none
Inherited:	no
---	---
Version:	CSS1
---	---
JavaScript syntax:	`object.style.backgroundImage="url(stars.gif)"`
---	---

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.

Property
background-image	1.0	4.0	1.0	1.0	3.5

Note: IE8 and earlier do not support multiple background images on one element.

Value	Description
url('URL')	URL of the image
none	No background image will be displayed. This is default
linear-gradient()	Creates a linear gradient "image" (top to bottom)
radial-gradient()	Creates a radial gradient "image" (center to edges)
repeating-linear-gradient()	Creates a repeating linear gradient "image"
repeating-radial-gradient()	Creates a repeating radial gradient "image"
inherit	Specifies that the background image should be inherited from the parent element