CSS Property: background-position
The position (or starting position, if tiled) of a background image.

background-position: top right
combined with background-repeat: no-repeat
.Possible Values
May contain one or, more commonly, two values.
Value | Description | Example |
---|---|---|
[length] | The point of the left or top side of the image, measured from the left or top of the background area. | 50px |
[percentage] | Measured from the left or top of the background area, where 0% pushes the image up against the starting point, and 100% pushes the image up against the end point of the full width or height of the background area. | 25% |
center | Keyword. The equivalent of 50% 50% , if used by itself. | |
top | Keyword. The equivalent of 50% 0% , if used by itself. | |
right | Keyword. The equivalent of 100% 50% , if used by itself. | |
bottom | Keyword. The equivalent of 50% 100% , if used by itself. | |
left | Keyword. The equivalent of 0% 50% , if used by itself. | |
[value] [value] | Any sensible combination of two lengths/percentages or two keywords. If values are lengths or percentages, the first is the horizontal position and the second is the vertical position. | 200px 100px |
[value] [value] [value] | Offset.
| top 10em right |
[value] [value] [value] [value] | Offset.
| top 10em right 5em |
[values], [values] | For multiple backgrounds. Value sets separated by commas correspond to multiple images separated by commas with background-image . | top right, 11px 22px |
inherit | ||
initial | ||
unset |
Example
.dimple { background-position: right bottom; }
/* Places a background image in the bottom-right corner of a box. */
.bump { background-position: top 30px left 2px; }
/* Background is 30 pixels down from the top and 2 pixels in from the left. */