The background-position-x
CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin
.
background-position-x
Try it
The value of this property is overridden by any declaration of the background
or background-position
shorthand properties applied to the element after it.
Syntax
/* Keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* Side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* Multiple values */ background-position-x: 0px, center; /* Global values */ background-position-x: inherit; background-position-x: initial; background-position-x: revert; background-position-x: revert-layer; background-position-x: unset;
The background-position-x
property is specified as one or more values, separated by commas.
Values
-
left
-
Aligns the left edge of the background image with the left edge of the background position layer.
-
center
-
Aligns the center of the background image with the center of the background position layer.
-
right
-
Aligns the right edge of the background image with the right edge of the background position layer.
-
<length>
-
The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).
-
<percentage>
-
The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image.
Formal definition
Initial value | 0% |
---|---|
Applies to | all elements |
Inherited | no |
Percentages | refer to width of background positioning area minus height of background image |
Computed value | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
Animation type | discrete |
Formal syntax
Examples
Basic example
The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.
HTML
<div></div>
CSS
div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; }
Result
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
background-position-x |
1
|
12
|
49
|
6
|
15
|
1
|
≤37
|
18
|
49
|
18
|
1
|
1.0
|
two_value_syntax |
No
|
12-79
|
49
|
9
|
No
|
No
|
No
|
No
|
49
|
No
|
No
|
No
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x