Example
Set different background properties in one declaration:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Try it Yourself »
Definition and Usage
The background shorthand property sets all the background properties in one declaration.
The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.
It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.
| Default value: | see individual properties |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS1 + new properties in CSS3 |
| JavaScript syntax: | object.style.background="red url(smiley.gif) top left no-repeat" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 and earlier versions do not support multiple background images on one element.
Note: See individual browser support for each value below.
CSS Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
Property Values
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
Related Pages
CSS tutorial: CSS Background
CSS3 tutorial: CSS3 Backgrounds
HTML DOM reference: background property