The background-position
CSS property sets the initial position, relative to the background position layer defined by background-origin
, for each defined background image.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* 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;
The background-position
property is specified as one or more <position>
values, separated by commas.
Values
<position>
- A
<position>
. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values. If two values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to becenter
. -
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
. Ifleft
orright
are given here, then this defines X and the other given value defines Y. Iftop
orbottom
are given, then this defines Y and the other value defines X. - A
<length>
or<percentage>
. If the other value isleft
orright
, then this value defines Y, relative to the top edge. If the other value istop
orbottom
, 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
orbottom
, then the other value may not betop
orbottom
. - If one value is
left
orright
, then the other value may not beleft
orright
.
This means, e.g., that
top top
andleft right
are not valid. - The keyword value
Formal syntax
<bg-position>#where
<bg-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 the background
property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.
HTML
<div class="exampleone">Example One</div> <div class="exampletwo">Example Two</div> <div class="examplethree">Example Three</div>
CSS
/* Shared among all <div>s */ div { background-color: #FFEE99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* These examples use the `background` shorthand 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, 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; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'background-position' in that specification. |
Candidate Recommendation | Adds support for multiple backgrounds and the four-value syntax. Modifies the percentage definition to match implementations. |
CSS Level 2 (Revision 1) The definition of 'background-position' in that specification. |
Recommendation | Allows for keyword values and <length> and <percentage> values to be mixed. |
CSS Level 1 The definition of 'background-position' in that specification. |
Recommendation | Initial definition. |
Initial value | 0% 0% |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
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 |
Animation type | repeatable list of simple list of length, percentage, or calc |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1 | 4 | 3.5 | 1 |
Multiple backgrounds | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 |
Four-value syntax (support for offsets from any edge) | 25 | 12 | 13 | 9 | 10.5 | 7 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
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 | 14 | Yes | Yes | Yes |
Quantum CSS notes
- Gecko has a bug meaning that
background-position
can't betransitioned
between two values containing different numbers of<position>
values, for examplebackground-position: 10px 10px;
andbackground-position: 20px 20px, 30px 30px;
(see bug 1390446). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57) fixes this.