The background-position property is used in combination with the background-image property; in other words if there is an image specified as background then the background-position property defines where the image will be position within the content.

The background-position property contains following information:

  1. value: [[<percentage>, <length>, left, center, right][<percentage>, <length>, top, center, bottom]?], [[left, right, center], [top, center, right]] or inherit;
  2. initial: 0% 0%;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: refers to the size of the box itself;
  6. media: visual;
  7. computed value: for <length> the absolute value, otherwise a percentage.

If only one value is specified, the second value is assumed to be center. If one of the values is not a "keyword" then the first value is taken to be horizontal position while the second is the vertical. Negative values for <percentage> and <length> are allowed.

The values given as percentage or length will move the image across the horizontal axis and down across the vertical axis. For instance a value "0% 0%" will position the image in the upper left corner, while the value of "100% 100%" will position it in the lower right corner.

The values top, right, bottom and left are equivalents to "0%" for the vertical position, "100%' for the horizontal position, "100%" for the vertical position and "0%" for the horizontal position respectively. The value center is equivalent to the "50%" for the horizontal position if it's not otherwise given and "50%" for the vertical position if it is.


CSS background-position property example:


›› go to examples ››