Style background Property

❮ Previous ❮ Style Object Reference Next ❯

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