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:
- value: [[<percentage>, <length>, left, center, right][<percentage>, <length>, top, center, bottom]?], [[left, right, center], [top, center, right]] or inherit;
- initial: 0% 0%;
- applies to: all elements;
- inherited: no;
- percentages: refers to the size of the box itself;
- media: visual;
- 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: