CSS Pocket Reference, 3rd Edition

Name

background-position

Values:

[[<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | bottom]?] | [[left | center | right] || [top | center | bottom]] | inherit

Initial value:

0% 0%

Applies to:

Block-level and replaced elements.

Inherited:

No.

Percentages:

Refer to the corresponding point on both the element and the origin image.

Computed value:

The absolute length offsets if <length> is specified; otherwise, percentage values.

Description:

This property sets the position of the background’s origin image (as defined by background-image); this is the point from which any background repetition or tiling will occur. Percentage values define not only a point within the element, but also the same point in the origin image itself, thus allowing (for example) an image to be centered by declaring its position to be 50% 50%. For more details, see Chapter 9 of CSS: The Definitive Guide, Third Edition (O’Reilly). When percentage or length values are used, the first is always the horizontal position, and the second the vertical. If only one value is given, it sets the horizontal position, while the missing value is assumed to be either center or 50%. Negative values are permitted and may place the origin image outside the element’s content area without actually rendering it.

Examples:

body {background-position: top center;}
div#navbar {background-position: right;}
pre {background-position: 10px 50%;}

Supported by:

Firefox, Internet Explorer, Opera, Safari.