Style background Property
Example
Style the background of a document:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The background property sets or returns up to eight separate background properties, in a shorthand form.
With this property, you can set/return one or more of the following (in any order):
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-size
- background-origin
- background-clip
The properties above can also be set with separate style properties. The use of separate properties is highly recommended for non-advanced authors for better controllability.
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: See individual browser support for each value below.
Syntax
Return the background property:
object.style.background
Set the background property:
object.style.background="color image
repeat attachment position size origin clip|initial|inherit"
Property Values
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | transparent none repeat scroll 0% 0% auto padding-box border-box |
|---|---|
| Return Value: | A String, representing the background of an element |
| CSS Version | CSS1 + new properties in CSS3 |
More Examples
Example
Change the background of a DIV element:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";Try it Yourself »
Example
Set a background color for a document:
document.body.style.backgroundColor = "red";Try it Yourself »
Example
Set a background image for a document:
document.body.style.backgroundImage = "url('img_tree.png')";Try it Yourself »
Example
Set a background-image to no-repeat:
document.body.style.backgroundRepeat = "repeat-y";Try it Yourself »
Example
Set the background-image to be fixed (will not scroll):
document.body.style.backgroundAttachment = "fixed";Try it Yourself »
Example
Change the position of a background-image:
document.body.style.backgroundPosition = "top right";Try it Yourself »
Example
Return the background property values of a document:
document.body.style.background;Try it Yourself »
Related Pages
CSS tutorial: CSS Background
CSS3 tutorial: CSS3 Backgrounds
CSS reference: background property
Style Object
