This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

background

Summary

The background-position property sets the starting position of a background image.

Property of css/cssom/CSSStyleDeclaration/CSSStyleDeclarationcss/cssom/CSSStyleDeclaration/CSSStyleDeclaration

Syntax

var result = declaration.background;
declaration.background = value;

Return Value

Returns an object of type StringString

Examples

The following examples use the background property and the background attribute to set the background values.

This example uses inline event handlers to modify the background-color and background-position attributes of an image. These attributes are specified in an embedded style sheet using the background attribute.

<STYLE>
.style1{background:beige url(sphere.jpg) no-repeat top center}
.style2{background:ivory url(sphere.jpeg) no-repeat bottom right}
</STYLE>
</HEAD>
<BODY>
<SPAN onmouseover="this.className='style1'"
    onmouseout="this.className='style2'">
. . .  </SPAN>

View live example

This example uses inline scripting to modify the background-color and background-position properties of an image.

<SPAN onclick="this.style.background='beige url(sphere.jpeg)
  no-repeat top center'">
. . . </SPAN>

View live example

Notes

Remarks

The background property is a composite property. Separate properties can be used to specify each property, 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 are set to their default values. For example, the default value for image is none. Setting background: white is equivalent to setting background: white none repeat scroll 0% 0%. So, in addition to setting the background color to white, setting background: white clears any image, repeat, attachment, or position values previously set. The background properties render in the object’s content and padding; however, borders are set using the border properties. In Microsoft Internet Explorer 3.0, elements that expose the background property only support the color and image values; the attachment value is only supported by the body, table, and td elements. In block elements, such as p and div, background images and colors appear only behind text in Internet Explorer 3.0; in Microsoft Internet Explorer 4.0 and later, backgrounds stretch from margin to margin when used with block elements. Although objects do not inherit the background property, the background image or color of an object’s parent appears behind an object if a background is not specified. For more information about supported colors, see the Color Table.

Syntax

background: '[ <color> || image || repeat || attachment || position ]

Standards information

See also

Related articles

Background

Related pages

Attributions