background-position

The background-position property sets the initial position (offset) of the background image. By default the background is in the upper left corner of the element and is repeated both vertically…

Initial Value 0% 0%
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation length & percentage values, calc()

The background-position property can take up to four values. If the offset is set to one value, that value will render as a horizontal offset. The browser sets the vertical center position automatically. If two values, the first value is the horizontal offset, and the second value is the vertical offset.

In addition to using keywords (top, center, bottom, left, right), the position can also be specified in percentages, pixels, or other CSS units. If keywords are used, their order is irrelevant; for percentages, the horizontal position of the figure is specified first, followed by a space, and then the vertical position.

The relationship between the keywords used and the percentage values is as follows:

top left0% 0%
top center50% 0%
top right100% 0%
center left0% 50%
center50% 50%
center right100% 50%
bottom left0% 100%
bottom right100% 100%

Syntax

/* Keyword values */

background-position: top;
background-position: right;
background-position: bottom;
background-position: left;
background-position: center;

/* Length (unit) values */

background-position: 0 0;
background-position: 15px 35px;
background-position: 30vw 30vh;

/* Percentage values */

background-position: 25% 45%;
background-position: 0% 75%;

/* Offset values */

background-position: top left 20px;
background-position: bottom 25% right;
background-position: top 2rem left 15%;

/* Global values */

background-position: inherit;
background-position: initial;
background-position: revert;
background-position: unset;

Description

valuewhat it does
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
If one keyword is used, the second one will default to “center”
x% y%The first value is the horizontal position; the second value is the vertical position. The top left corner has position 0% 0%. Bottom right corner – 100% 100%. If one value is given, the second one will default to 50%. Default value: 0% 0%.
xpos yposThe first value is the horizontal position; the second value is the vertical position. The top left corner has a position of 0 0. The values ​​can be pixels (0px 0px), or any other units allowed in CSS. If one value is given, the second one will default to 50%. You can use % and distance units together.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

background-position

center
bottom right
10px 50%
bottom 25% right
top 2rem left 15%