background-position Attribute | backgroundPosition Property
Sets or retrieves the position of the background of the object.
Syntax
CSS { background-position : sPosition } Scripting [ sPosition = ] object.style.backgroundPosition
Possible Values
sPosition String that specifies or receives one or two of the following values.
- length
- Floating-point number, followed by an absolute units designator (
cm,mm,in,pt, orpc) or a relative units designator (em,ex, orpx). For more information about the supported length units, see CSS Length Units Reference.- percentage
- Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
- vAlignment
- Vertical alignment value. Possible values include the following:
topVertical alignment is at the top.centerVertical alignment is centered.bottomVertical alignment is at the bottom.- hAlignment
- Horizontal alignment value. Possible values include the following:
leftHorizontal alignment is to the left.centerHorizontal alignment is centered.rightHorizontal alignment is to the right.The property is read/write. The property has a default value of 0% 0%. The Cascading Style Sheets (CSS) attribute is not inherited.
DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.
Remarks
If only one value is set, that value applies to the horizontal coordinate, and the vertical is set to
50%. If both values are set, the first value applies to the horizontal coordinate and the second value applies to the vertical.Setting the values to
0% 0%(initial value) positions the backgroundImage to the upper left corner of the element's content block, which includes the padding.Setting the background position using pixels positions the upper-left of the image at the specified x and y coordinates within the parent element. As the coordinates increase, the image moves to the right and down the visible area. By contrast, setting the background position with percentages uses a corresponding point on the image. At a position of
50% 50%the image is effectively centered within the visible area.This property can be set with the other background properties using the background composite property.
In Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties ( background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.
Examples
The following examples use the background-position attribute and the backgroundPosition property to specify the position of a background image.This example uses a call to an embedded (global) style sheet to move the sphere.
<STYLE> .style1 { background-position:top center } .style2 { background-position:bottom right } </STYLE> </HEAD> <BODY onload="oSpan.className='style1'"> <SPAN STYLE="font-size:14; width:250;" ID="oSpan" onmouseover="this.className='style2'" onmouseout="this.className='style1'"> . . . </SPAN>Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background-position.htm
This example uses an inline style to move the sphere.
<SPAN onmouseover="this.style.backgroundPosition='bottom right'">Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/backgroundPosition.htm
The following example demonstrates the difference between setting the background position by pixels and setting it by percentages.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/backgroundPositionX.htm
Standards Information
This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1).
Applies To
A, ADDRESS, ARTICLE, ASIDE, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CSSStyleDeclaration, currentStyle, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FIGCAPTION, FIGURE, FOOTER, FORM, HEADER, HGROUP, hn, HTML, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARK, MARQUEE, MENU, NAV, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SECTION, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor
