Export (0) Print
Expand All
top
Expand Minimize

background-position

important noteImportant

This documentation is preliminary and subject to change.

Sets the position of the background of the object.

Syntax

{ background-position: sPosition }

Possible values

sPosition

String that specifies one or two of the following values:

length

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).

percentage

Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object:

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

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

This property has a default value of 0% 0%. It is not inherited.

Remarks

If only one value is set, that value applies to the horizontal coordinate, and the vertical coordinate 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 coordinate.

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 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 example uses the background-position 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>  

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee341472.xtlink_newWindow(en-us,Expression.40).png.

Applies to

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, 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, LI, OL, P, S, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

See also

Concepts

background

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft