CSS background-image property
Examples
Background image body element:
{
background-image:url('paper.gif');
background-color:#cccccc;
}
try it"
Tag definitions and instructions
background-image property sets the background image of an element.
The total size of the background elements of the element, including padding and border (but not including margins).
By default, background-image is placed in the upper left corner of the element, and repeat vertically and horizontally.
Defaults: | none |
---|---|
inherit: | no |
version: | CSS1 |
JavaScript syntax: | object object.style.backgroundImage = "url (stars.gif)" |
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
Property | |||||
---|---|---|---|---|---|
background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note that IE8 and earlier browsers do not support multiple background images on one element
Note that IE7 and earlier versions do not support "inherit" value.IE8 need to define! DOCTYPE. IE9 support the "inheritance."
Tips and Notes
Tip: Be sure to set the background color, if the image is not available, will be used.
Property Value
value | Explanation |
---|---|
url( 'URL') | URL of the image |
none | No background image is displayed. This is the default |
inherit | Specify a background image should be inherited from the parent element |
Online examples
Multiple background images
This example demonstrates the document multiple background images.
related articles
CSS tutorial: CSS Background
CSS3 tutorial: CSS3 Backgrounds