background-position Attribute | backgroundPosition Property

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

Syntax

HTML Scripting

{ background-position : sPosition }

object . style.backgroundPosition [ = sPosition ]

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 , pc , or px ) or a relative units designator ( em or ex ). 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:

top	Vertical alignment is at the top.
center	Vertical alignment is centered.
bottom	Vertical alignment is at the bottom.

hAlignment

Horizontal alignment value. Possible values include the following:

left	Horizontal alignment is to the left.
center	Horizontal alignment is centered.
right	Horizontal 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.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About 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 backgroundImage 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 overwrites the center value, and the background shifts right accordingly.

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

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>

This example uses an inline style to move the sphere.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies To

[ Object Name ] Platform Version

Win16:
Win32:
Windows CE:
Unix:
Mac:

A , ADDRESS , B , BIG , BLOCKQUOTE , BODY , BUTTON , CAPTION , CENTER , CITE , CODE , COL , COLGROUP , CUSTOM , DD , defaults , 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 , SMALL , SPAN , STRIKE , STRONG , style , SUB , SUP , TABLE , TBODY , TD , TEXTAREA , TFOOT , TH , THEAD , TR , TT , U , UL , VAR , XMP

Home | Top | Free Ajax Editor | JavaScript Editor

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→