O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

background-position

Values:

<bg-position> [ , <bg-position> ]*

Expansions:

<bg-position>

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

Initial value:

0% 0%

Applies to:

All 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 declared; otherwise, percentage values

Description:

Defines the position(s) of one or more backgrounds’ origin images (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%. 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. The context within which an origin image is placed can be affected by the value of background-origin.

Examples:

body {background-position: top center;} div#navbar {background-position: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required