background-position Description:
The background-position property defines the x and y (horizontal and vertical) position of the background image.
background-position in CSS Versions:
background-position Syntax:
background-position: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] | inherit
- percentage
A percent of the element size. - length
Actual pixel lengths. - top
The top of the element. - center
The horizontal (first position) or vertical (second position) center of the element. - bottom
The bottom of the element. - left
The left side of the element. - right
The right side of the element. - inherit
The element should have the same background-position setting as the parent.
background-position Initial Value:
0% 0%
background-position Applies To:
All block-level and replaced elements.
background-position Inheritance:
This property is not inherited.
background-position Browser Support:
background-position Examples:
specified by length
<p style="background-position : 10px 20px; background-image : /library/graphics/purple.gif;">
This paragraph has the purple.gif image as a background that starts tiling at 10px over and 20px down from the upper left corner.
</p>
background-position Special Notes:
- The background-position property only reliably works in the <body> tag in many browsers.
- This style requires a background image set.
Keywords have meanings that are based on the percentages:
- 'top left' and 'left top' both mean the same as '0% 0%'.
- 'top', 'top center' and 'center top' mean the same as '50% 0%'.
- 'right top' and 'top right' mean the same as '100% 0%'.
- 'left', 'left center' and 'center left' mean the same as '0% 50%'.
- 'center' and 'center center' mean the same as '50% 50%'.
- 'right', 'right center' and 'center right' mean the same as '100% 50%'.
- 'bottom left' and 'left bottom' mean the same as '0% 100%'.
- 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
- 'bottom right' and 'right bottom' mean the same as '100% 100%'.
