The background-position property defines the initial position of the background image of an element relative to the background positioning area of that element defined by the background-origin property.
In other words, it defines the starting position of a background image relative to the starting position of the background positioning area.
CSS
background-position: [h-pos] [v-pos];
The background-position property can take two values - the first one defining the horizontal position and the second one the vertical position.
Values
<length>
Defines the position of the background image in px, pt, em, rem, cm, etc. The first value defines the horizontal position and the second value the vertical position. The default value is 0 0 which is at the top left corner.
If only one value is specified, then the other value is by default assumed 50%.
<percentage>
Defines the position of the background image in percentage. The first value defines the horizontal position and the second value the vertical position. The default value is 0% 0% which is at the top left corner.
If only one value is specified, then the other value is by default assumed 50%.
keywords
The keywords left and right are used to define horizontal position and topand bottom are used to define vertical position. The keyword center can be used to define both horizontal as well as vertical position. The default value is center center.
If only one value is specified, then the other value is by default assumed center. While specifying keyword values, it is not necessary for the first value to be the horizontal position.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Example
See the Pen background-position property values by Aakhya Singh (@aakhya) on CodePen.
The last two examples in the above demo includes 1-value syntax, which by default makes the other value equal to 50% (or center).
Giving different values for different background images
If an element has multiple background images, then you need to give multiple comma-separated value sets to the background-position property to place them at different positions.
The first value set (before the first comma) defines the horizontal and vertical positions of the first background image, the second value set of the second image, and this goes on for every image. If only one value set is specified, then it will define the position of all the background images.
Look at the following example.
HTML
<div></div>
CSS
div {
width: 300px;
height: 152px;
background-image: url('bird.png'), url('sky.jpg');
background-repeat: no-repeat;
background-position: bottom center, 20px 20px;
}
The first value set bottom center places the first image 'bird.png' at the bottom center of the container box of the div, while the second value set 20px 20px places the second image 'sky.jpg' at a distance of 20px from the left and the top edges of the container box.
See the Pen background-position values for different background images by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.
