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
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 | Nightly (WebKit bug 37514) |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1) | (Yes) | (Yes) | (Yes) |
Multiple backgrounds | NA | 1.0 (1.9.2) | NA | NA | NA |
Four-value syntax (support for offsets from any edge) | Not supported | 13.0 (13.0) | NA | NA | Not supported |