Style background attribute

Definition and Usage

background The attribute sets or returns up to eight individual background properties in a shorthand form.

Through this attribute, you can set/return one or more of the following (in any order):

DOM attribute CSS attribute
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 above properties can also be set using separate style properties. It is strongly recommended that non-advanced authors use separate properties for better controlability.

See also:

CSS Tutorial:CSS Background

CSS3 Tutorial:CSS3 Background

CSS Reference Manual:background attribute

Example

Set the style of the document's background:

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

Try it yourself

More TIY examples are at the bottom of the page.

Syntax

Return the background attribute:

object.style.background

Set the background attribute:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Attribute value

Value Description
color Set the background color of the element.
image Set the background image of the element.
repeat Set the repeating pattern of the background image.
attachment Set whether the background image is fixed or scrolls with the page.
position Set the starting position of the background image.
size Set the size of the background image.
origin Set the positioning area of the background.
clip Set the drawing area of the background image.
initial Set this property to its default value. See also initial.
inherit Inherit this property from its parent element. See also inherit.

Technical details

Default value: transparent none repeat scroll 0% 0% auto padding-box border-box
Return value: A string representing the element's background.
CSS Version: CSS1 + new properties in CSS3

More examples

Example 2

Change the background of the DIV element:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Try it yourself

Example 3

Set the background color for the document:

document.body.style.backgroundColor = "red";

Try it yourself

Example 4

Set the background image for the document:

document.body.style.backgroundImage = "url('img_tree.png')";

Try it yourself

Example 5

Set the background image to non-repeating:

document.body.style.backgroundRepeat = "repeat-y";

Try it yourself

Example 6

Set the background image to fixed (not scrolling):

document.body.style.backgroundAttachment = "fixed";

Try it yourself

Example 7

Change the position of the background image:

document.body.style.backgroundPosition = "top right";

Try it yourself

Example 8

Return the background attribute value of the document:

document.body.style.background;

Try it yourself

Browser support

background It is a CSS1 (1996) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support Support

Comments

Three new attributes were added in CSS3 (1999):