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.
Description
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 »