7 out of 14 rated this helpful - Rate this topic

background-position property

[This documentation is preliminary and is subject to change.]

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

Syntax

background-position: [ [ percentage | length | left | center | right ] [ percentage | length | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

Property values

A variable of type 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, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.
percentage: Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.

Vertical alignment value.

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

Horizontal alignment value.

left: Horizontal alignment is to the left.
center: Horizontal alignment is centered.
right: Horizontal alignment is to the right.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value

Standards information

CSS 2.1, Section 5.3.6

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 background-image 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 Windows 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 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.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background-position.htm

Copy


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

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/backgroundPosition.htm

Copy


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

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

Build date: 3/14/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Content Add

FAQ

Doubts on css

Hi i have one small doubt

.tabActiveNew img.left {
        float: left;
        background: url(/images/tab_curve.gif) no-repeat -1px 0px;
        width:7px;
        height: 23px;
    }

anyone can explain this line " background: url(/images/tab_curve.gif) no-repeat -1px 0px; "

tab_curve.gif is contain multiple part not a single image....

thanks in advance.....

History

11/15/2010
raj acm

attributes documentation reading order

Don't miss this little sentence: "If both values are set, the first value applies to the horizontal coordinate and the second value applies to the vertical"! I can't understand why the various documentations still present vAlignement first even it's got to be written in second. When using keywords instead of numbers, vAlignement and hAlignement are togglelable ("top center" equal "center top") so why not present them in the numbers order? Adding margin/padding which have the vAlignement as first, all is done to mistake us.

History

2/27/2008
Lacrymocéphale

11/29/2008
Lacrymocéphale