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.
Initial0% 0%
Applies toall elements
Inheritedno
Percentagesrefer 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
Mediavisual
Computed Valuea 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
Animatableyes, 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 orderthe 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
01
.exampleone {
02
background-image: url("logo.png");
03
background-position: top;
04
}
05
.exampletwo {
06
background-image: url("logo.png");
07
background-position: 25%75%;
08
}
09
.examplethree {
10
background: url("logo.png") 2cm bottom;
11
}
12
.examplefour {
13
background-image: url("logo.png");
14
background-position: center10%;
15
}
16
.examplefive {
17
background: url("logo.png") 3em50%;
18
}
19
.examplesix {
20
background-image: url("logo.png");
21
background-position: right20pxbottom20px;
22
}
23
.exampleseven {
24
/* Multiple background images:
25
Each image is matched with the corresponding position style,
