Click to return to the DHTML, HTML     
background-image Attribut...     backgroundPositionX Prope...     DHTML Properties    
Web Workshop  |  DHTML, HTML & CSS

background-position Attribute | backgroundPosition Property


Sets or retrieves the position of the background of the element.

Syntax

HTML{ background-position: sPosition }
Scriptingobject.style.backgroundPosition [ = sPosition ]

Possible Values

sPosition String that specifies one or two of the following values:
lengthFloating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units.
percentageInteger, followed by a %. The value is a percentage of the width or height of the object.
vAlignmentVertical alignment value consisting of one of the following:
topVertical alignment is at the top.
centerVertical alignment is centered.
bottomVertical alignment is at the bottom.
hAlignmentHorizontal alignment value consisting of one of the following:
leftHorizontal alignment is to the left.
centerHorizontal alignment is centered.
rightHorizontal alignment is to the right.

The property is read/write with a default value of 0% 0%; the cascading style sheets (CSS) attribute is not inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see Dynamic Properties.

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% positions the background-image to the upper left corner of the element's content excluding the padding.

Specifying right center has the following effect: Because right is assumed to be an x-coordinate direction, right will overwrite the center value; the background shifts right accordingly.

This property may be set together with the other background properties using the background composite property.

Example

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.

Sample Code

<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>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

This example uses an inline style to move the sphere.

<SPAN onmouseover="this.style.backgroundPosition='bottom right'">

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, 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, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP


Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.