background-position
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 values */ 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;
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
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:
- 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 a <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 a <percentage>. If the other value is
left
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 that "
top top"
or "left right
" are not valid. - one of the keyword values
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 | Edge | Firefox | Internet Explorer | Opera | Safari | Servo |
---|---|---|---|---|---|---|---|
Basic Support | 1.0 | 12 | 1.0 | 4 | 3.5 | 1.0 | ? |
Multiple backgrounds | 1.0 | 12 | 3.6 | 9.0 | 10.5 | 1.3 | ? |
Four-value syntax (support for offsets from any edge) | 25.0 | 12 | 13.0 | 9.0 | 10.5 | 7.0 | ? |
Feature | Android | Chrome for Android | Edge Mobile | Firefox for Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
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
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position