CSS Attributes Index   Color and Background Attributes

---

Sets or retrieves the separate background attributes ( background-color, background-image, background-repeat, background-attachment, and background-position ) for an object all at once.

CSS	{ background: background-color || background-image || background-repeat || background-attachment || background-position }
Script	object.style.background = [ strColor ] [ sImage ] [ sRepeat ] [ sAttachment ] [ sPosition ] ]

strColor	background-color	Any of the range of values available to the backgroundColor property.
sImage	background-image	Any of the range of values available to the backgroundImage property.
sRepeat	background-repeat	Any of the range of values available to the backgroundRepeat property.
sAttachment	background-attachment	Any of the range of values available to the backgroundAttachment property.
sPosition	background-position	Any of the range of values available to the backgroundPosition property.

The property is read/write with a default value of transparent none repeat scroll 0% 0%; this attribute is not inherited.

The property is a shorthand ( "composite" ) property. Separate properties can be used to specify each of the individual properties, but in many cases it is more convenient to set them in one place using this composite property.

Individual background properties not set by the composite background property will be set to their default values. For example, the default value for background-image is none. Setting background: white is identical to saying background: white none repeat scroll 0% 0%. So, in addition to setting the background color to white, setting background: white will clear any background-image, background-repeat, background-attachment, or background-position that has been previously set.

The background properties render in the object’s content and padding; however, borders are set using the border properties.

Microsoft^® Internet Explorer^® 3.0 supports the background-color, background-image, and background-attachment possible values. The background-attachment possible value is exposed to the BODY, TABLE, and TD objects in Internet Explorer^® 3.0. The background in objects such as P and DIV fills color behind the text only as of Internet Explorer^® 3.0. The background is filled to the margins as of Internet Explorer^® 4.0 or later.

While the attribute does not inherit, the parent object’s background will shine through by default due to the initial transparent value.

For more information on supported colors, see the Color Table.

The following examples demonstrate use of inline event handlers to dynamically set the composite background attributes of an element. Both methods yield the same effect.

The sample below defines background-color, background-image and background-position style attributes in an embedded stylesheet, and invokes calls to the stylesheet in response to mouse events.

<style type="text/css">
<!--
   .style1 {
      background: black url( "../shared/images/earth.gif" )
      no-repeat right }
   .style2 {
      background: black url( "../shared/images/jupiter.gif" )
      no-repeat left }
-->
</style>
...
<p onmouseover="this.className='style2'"
   onmouseout="this.className='style1'">
   ...
</p>

 Show me 

The sample below uses inline event handlers to dynamically set an object’s background properties in response to mouse events.

<p style="background: 'black url( ../shared/images/jupiter.gif ) no-repeat top left'"
   onmouseover="this.style.background='navy url( ../shared/images/neptune.gif ) no-repeat bottom right'"
   onmouseout="this.style.background='black url( ../shared/images/jupiter.gif ) no-repeat top left'">
   ...
</p>

 Show me 

background-attachment, background-color, background-image, background-position, background-repeat