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):
| DOM Property | CSS Property |
|---|---|
| backgroundAttachment | background-attachment |
| backgroundClip | background-clip |
| backgroundColor | background-color |
| backgroundImage | background-image |
| backgroundOrigin | background-origin |
| backgroundPosition | background-position |
| backgroundRepeat | background-repeat |
| backgroundSize | background-size |
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.
See Also:
HTML Styles: The background Property
CSS Tutorial: CSS Backgrounds
CSS3 tutorial: CSS3 Backgrounds
CSS Reference: The background Property
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 |
|---|---|
| attachment | Sets if a background image is fixed or scrolls |
| clip | Sets the painting area of a background image |
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| origin | Sets the background positioning area |
| position | Sets the starting position of a background image |
| repeat | Sets how a background image will be repeated |
| size | Sets the size 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 |
Browser Support
background is a CSS1 (1996) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
Note
3 new properties were added in CSS3 (1999):
- background-clip
- background-origin
- background-size
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 »
