CSS Property - Background Position

Value: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial: 0% 0%
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to the size of the element itself

If a background image is being used, the value of the CSS property "background-position" specifies its initial position.

With a value pair of "0% 0%", the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value of "100% 100%" places the bottom right hand corner of the image in the bottom right hand corner of the element. With a value of "10% 90%", this works out to be 10% across and 90% down the element where the image is being used.

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. "50% 2cm". Negative positions are allowed.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

  • "top left" and "left top" both mean the same as "0% 0%".
  • "top", "top center" and "center top" mean the same as "50% 0%".
  • "right top" and "top right" mean the same as "100% 0%".
  • "left", "left center" and "center left" mean the same as "0% 50%".
  • "center" and "center center" mean the same as "50% 50%".
  • "right", "right center" and "center right" mean the same as "100% 50%".
  • "bottom left" and "left bottom" mean the same as "0% 100%".
  • "bottom", "bottom center" and "center bottom" mean the same as "50% 100%".
  • "bottom right" and "right bottom" mean the same as "100% 100%".

Values that can be used for positioning the background image are as follows:

  • % - 10% 10%
  • em - 10em 10em
  • px - 10px 10px
  • cm - 10cm 10cm
  • etc...

Examples:

body{
background-image: url("image.gif");
background-position: right top;
}

body{
background-image: url("image.gif");
background-position: 10% 10%;
}