The background-position Property

The background-position property controls the position of the background image. The property value consists of two parts separated by a space: x y.

x assigns the horizontal and y the vertical position.

For the x value, you can use the keywords left, center, right, as well as percentage and pixel values.

For the y value, you can use the keywords top, center, bottom, as well as percentage and pixel values.

Here are some examples of how the property is used:

background-position: 50% 50%;
background-position: right bottom;
background-position: 50px 100px;
background-position: 0 100%;
background-position: left bottom;

This is what the examples look like in practice:

1. The image will be centered;
2. Bottom right corner;
3. Padding of 50px from the left and 100px from the top;
4. Bottom left corner;
5. Bottom left corner.