CSS background-image property
Set the background image of the body element:
{
background-image:url('paper.gif');
background-color:#cccccc;
}
Try it out . . .
Label definition and instructions for use
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 boundaries (but not margins).
By default, background-image is placed in the upper-left corner of the element and repeats vertically and horizontally.
| Default: | none |
|---|---|
| Inherited: | no |
| Version: | CSS1 |
| JavaScript syntax: | object object.style.backgroundImage="url(stars.gif)" |
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Property | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note IE8 and earlier browsers do not support multiple background images in one element
Note I E7 and earlier versions do not support "inherited" values. I E8 needs to be defined! D OCTYPE。 IE9 supports inheritance.
Tips and comments
Tip: Be sure to set the background color, which will be used if the image is not available.
The property value
| Value | Description |
|---|---|
| url( 'URL' ) | The URL of the image |
| none | No image background is displayed. This is the default |
| inherit | Specifies that the background image should be inherited from the parent element |
Online instance
Multiple background pictures
This example demonstrates multiple background images in a document.
Related articles
CSS tutorial: CSS Background
CSS3 tutorial: CSS3 Backgrounds