Style background Property

Style Object Reference Style Object

Example

Style the background of a document:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Try it yourself »

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 background property is supported in all major browsers.

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