The ‘background-position’ is the CSS property which specifies the initial position of the background image for all elements. It also applies to ::first-letter and :first-line. The property is not inherited. The initial value is equal to 0% 0%. The property is animatable. To use it you need to set background-image property.
Values of the background-position property
left | center | right | top | bottom | <percentage> | <length>
[left | center | right | <percentage> | <length>] [top | center | bottom | <percentage | <length>
Negative values are acceptable. Negative values represent an offset outward from the edge of the element.
1) If only one value is given the second is assumed be
center. The right side of the background image is placed of the right side of the element and the image is placed 50% down of the element.
2) If two values are given the first represents horizontal position/offset and the second represents the vertical position/offset.
background-position: right bottom;
background-position: 10% 30%;
<percentage> and <length> values represent an offset of the top left corner of the background image from the top left corner of the background positioning area.
3) If four values are given then the direction of the offset for each value (<percentage> or <length>) must be defined – the edge of the element from which the offset of the background image is calculated.
background-position: bottom 30px right 40px;
How to calculate the position/offset:
1) The positions are given by length units for example pixels (same for em’s, cm’s etc):
The left top corner of the image is moved 150px from the left side and 250px from the top side of the element.
- ‘top’ is equal to 0% or 0 for the horizontal position
- ‘right’ is equal 100% for the horizontal position
- ‘bottom’ is equal 100% for the vertical position
- ‘top’ is equal 0% or 0 for the vertical position
- ‘center‘ is equal 50% (left 50%) for the horizontal position and 50% (top 50%) for the vertical position
1) The positions are given by percentage:
The ‘div’ element has dimensions: width = 400px and height = 400px;
The background image has dimensions: width = 100px and height = 100px;
The percentage for the horizontal offset is equal to the relative value of the difference in the width of the background element and the width of the background image. For example picture:
100px (25% of 400px width of the ‘div’ element) – 25px ( 25% of 100px width of the image) = 75px.
The point of 25% of the image width ( from left side of image ) coincides with the point of 25% of the ‘div’ element width.
The percentage for the vertical offset is equal to the relative value of the difference in the height of the background element and the height of the background image. For example picture:
300px (75% of 400px width of the ‘div’ element) – 75px ( 75% of 100px width of the image) = 225px.
The point of 75% of the image height ( from top side of image ) coincides with the point of 75% of the ‘div’ element height.