CSS background-position Guide

The background-position property is used to determine the starting position of a background image.

Syntax:
background-position: x y;

Attribute value:

1. The initial position in the horizontal direction. It can be specified in either pixels (e.g. 10px) or percentage (e.g. 50%). The default value is 50%.
2. y: The starting position in the vertical direction. It can be specified in pixels (such as 10px) or as a percentage value (such as 50%). The default value is 50%.

If only one value is specified, it will be applied to the starting position in both the horizontal and vertical directions.

background-position: 0 0; // Set the starting position of the background image to the top left corner

Negative values can be used to set the offset of the background image relative to the container.

Shift the starting position of the background image 10 pixels to the left and 20 pixels upwards.

Caution: If the width or height of the background image is smaller than the container’s width or height, the background image will be stretched to fill the entire container. In this case, the setting of the starting position may not have the desired effect.