background-position

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

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* <percentage> values */
background-position: 25% 75%;
/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* Multiple images */
background-position: 0 0, center;
/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

Initial value0% 0%
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Percentagesrefer 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
Mediavisual
Computed valuea 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
Animation typerepeatable list of simple list of length, percentage, or calc
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The background-position property is specified as one or more <position> values, separated by commas.

Values

<position>
A <position>. A position defines an XY coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values.

1-value syntax: the value may be:

  • the keyword value center, which centers the image.
  • one of the keyword values top, left, bottom, right. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
  • a <length> or <percentage>. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

2-value syntax: one value defines X and the other defines Y. Each value may be:

  • one of the keyword values top, left, bottom, right. If left or right are given here, then this defines X and the other given value defines Y. If top or bottom are given, then this defines Y and the other value defines X.
  • a <length> or <percentage>. If the other value is left or right, then this value defines Y, relative to the top edge. If the other value is top or bottom, then this value defines X, relative to the left edge. If both values are <length> or <percentage> values, then the first defines X and the second Y.

Note that:

  • if one value is top or bottom, then the other value may not be top or bottom.
  • if one value is left or right, then the other value may not be left or right.

This means that "top top" or "left right" are not valid.

Formal syntax

<position>#

where
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where
<length-percentage> = <length> | <percentage>

Examples

Each of these three examples uses CSS background to create a yellow, rectangular element that contains a star image. In each example, the star image is in a different position. In addition, the third example illustrates how to specify positions for two different background images within one element.

HTML Content

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS Content

/* Shared among all DIVS */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}
/* background-position examples */
/* These examples use the background shorthand CSS property */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}
/*
Multiple background images: Each image is matched with the
corresponding position style, from first specified to last.
*/
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

Output

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-position' in that specification.
Candidate Recommendation Added support for multiple backgrounds and the four-value syntax. Modified the percentage definition to match implementations.
CSS Level 2 (Revision 1)
The definition of 'background-position' in that specification.
Recommendation Allows for the mix of keyword values and <length> and <percentage> values.
CSS Level 1
The definition of 'background-position' in that specification.
Recommendation Initial definition.

Browser compatibility

FeatureChromeFirefoxEdgeInternet ExplorerOperaSafari
Basic Support1.01.01243.51.0
Multiple backgrounds1.03.6129.010.51.3
Four-value syntax (support for offsets from any edge)25.013.0129.010.57.0
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)
Multiple backgrounds(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)
Four-value syntax (support for offsets from any edge)(Yes)(Yes)(Yes)13.0(Yes)(Yes)(Yes)

See also