CSS background-imageProperty

Example

Set the background image of the body element:

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

The background-image property sets the background image of an element.

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

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

Tip:Please set an available background color, so that if the background image is unavailable, the background color can be used instead.

Default Value:	none
Inherited:	no
version:	CSS1
JavaScript Syntax:	object object.style.backgroundImage="url(stars.gif)"

The numbers in the table indicate the first browser version number that supports the property.

The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version number that supports the prefixed property.

Property
background-image	1.0	4.0	1.0	1.0	3.5

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

Value	Description
url('URL')	Image URL
none	No image background will be displayed. This is the default
linear-gradient()	Create a linear gradient "image" (from top to bottom)
radial-gradient()	Create "image" with radial gradient. (center to edges)
repeating-linear-gradient()	Create 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

Multiple Background Images
This example demonstrates multiple background images in a document.

other extensions