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

Syntax

Formal syntax:  <position>#

Values

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

Examples

.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;
}

Compatibility

Desktop browsers

Mobile browsers