background-position

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>

or

[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.

Examples:

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.

background-position: right;

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):

background-position:150px 250px

 

position:length lengt

The left top corner of the image is moved 150px from the left side and 250px from the top side of  the element.

<length>:

  • ‘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
background-position:50% 50%;

1) The positions are given by percentage:

background-position:25% 75%;

background: 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.

Related

Resources

Browser compatibility

background-position

Internet Explorer
4.0
Firefox
1.0
Chrome
1.0
Safari
1.0
Opera
3.5
Mobile
Safari Mobile
works
Android
works
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works