HTML Dog
Skip to navigation

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.

ValueDescriptionExample
[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%
centerKeyword. The equivalent of 50% 50%, if used by itself.
topKeyword. The equivalent of 50% 0%, if used by itself.
rightKeyword. The equivalent of 100% 50%, if used by itself.
bottomKeyword. The equivalent of 50% 100%, if used by itself.
leftKeyword. 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.
  • First value is a keyword.
  • Second value is a length/percentage representing distance from the edge defined by the first value.
  • Third value is a keyword with no offset.
top 10em right
[value] [value] [value] [value]Offset.
  • First value is a keyword.
  • Second value is a length/percentage representing distance from the edge defined by the first value.
  • Third value is a keyword.
  • Fourth value is a length/percentage representing distance from the edge defined by the third value.
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. */

Browser support