This article needs a technical review. How you can help.
Summary
The background-position
CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin
.
background-position
property is set as a CSS property independently of the background
shorthand property, and such an independent declaration is followed by a background
shorthand property that omits a value for background-position
, then the shorthand property resets background-position
to its default value.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 | a repeatable list of , a simple list of , a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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 values */ background-position: 0 0, center; /* Global values */ background-position: inherit; background-position: initial; background-position: unset;
Values
<position>
- Is a
<position>
—that is, one to four values representing a 2D position in relation to 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.
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
Multiple backgrounds | 1.0 | 3.6 (1.9.2) | 9.0 | 10.5 | 1.3 (312) |
Four-value syntax (support for offsets from any edge) | 25 (maybe earlier) | 13.0 (13.0) | 9.0 | 10.5 | 7.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1) | (Yes) | (Yes) | (Yes) |
Multiple backgrounds | ? | 1.0 (1.9.2) | ? | ? | ? |
Four-value syntax (support for offsets from any edge) | No support | 13.0 (13.0) | ? | ? | iOS 7.0 |