CSS background Property
Example
Setting multiple background images (and specifying their positions) within a div element:
body {
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
All major browsers support the background property.
Note: IE8 and earlier versions do not support multiple background images on one element.
Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to be specified. IE9 supports "inherit".
Definition and Usage
The background shorthand property sets all background style properties in one declaration.
The properties that can be set are: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
Values are separated by spaces and the order does not matter. It is permissible to have only certain values, for example, background: #FF0000 URL(smiley.gif); is allowed.
| Default value: | See individual properties |
|---|---|
| Inherited: | no |
| Version: | CSS1 + New properties in CSS3 |
| JavaScript syntax: | object.style.background="red url(smiley.gif) top left no-repeat" |
Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-position | Specifies the position of the background image | 1 |
| background-size | Specifies the size of the background image | 3 |
| background-repeat | Specifies how to repeat the background image | 1 |
| background-origin | Specifies the positioning area of the background image | 3 |
| background-clip | Specifies the painting area of the background image | 3 |
| background-attachment | Sets whether the background image is fixed or scrolls with the rest of the page | 1 |
| background-image | Specifies one or more background images to be used | 1 |
Related Articles
CSS Tutorial: CSS Backgrounds
CSS3 Tutorial: CSS3 Backgrounds