background-position property CSS Reference

Definition and Usage

The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Note: If the value of this property is not set in a background shorthand property that is applied to the element after the background-position CSS property, the value of this property is then reset to its initial value by the shorthand property.

  • Initial 0% 0%
  • Applies to all elements
  • Inherited no
  • Percentages refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • Media visual
  • Computed Value a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage
  • Animatable yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax:  <position>#


Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.


.exampleone {
  background-image: url("logo.png");
  background-position: top;
.exampletwo {
  background-image: url("logo.png");
  background-position: 25% 75%;
.examplethree {
  background: url("logo.png") 2cm bottom;
.examplefour {
  background-image: url("logo.png");
  background-position: center 10%;
.examplefive {
  background: url("logo.png") 3em 50%;
.examplesix {
  background-image: url("logo.png");
  background-position: right 20px bottom 20px;
.exampleseven {
  /* Multiple background images:
       Each image is matched with the corresponding position style,
       from first specified to last. */
  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 or earlier) (85)
Multiple backgrounds1.03.6 (1.9.2) (312)
Four-value syntax (support for offsets from any edge)25 (maybe earlier)13.0 (13.0)9.010.5Nightly (WebKit bug 37514)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)1.0 (1)(Yes)(Yes)(Yes)
Multiple backgroundsNA1.0 (1.9.2)NANANA
Four-value syntax (support for offsets from any edge)Not supported13.0 (13.0)NANANot supported

Relative articles