CSS Background-Position Property
The background-position property specifies the position of the background. The values can be specified in three ways: keywords, percentage values, and position values. Each is discussed in detail below.
This is often displayed as a two-word combination of the following terms,
top, bottom, left, right, center
The words can be in either order. For example, "top left" and "left top" are equivalent.
When keywords are used, it refers to both the position of the element and the position of the image. For example, if we specify "bottom left," it means the bottom left corner of the image touches the bottom left corner of the element. Below is an example.
If only one keyword is used, we get the following:
This is shown as two percentage values: The first indicating the horizontal percentage, and the second indicating the vertical percentage. The two values are separated by space.
Similar to keywords, the percentage values refer to both the position of the element and the position of the image. For example, "30% 25%" means that a point that is 30% from the left of the image and 25% from the top of the image is aligned with a point that is 30% from the left of the element and 25% from the top of the element. An example is shown below.
If only one percentage value is specified, it is treated as the horizontal percentage. The vertical position is treated as 50% (or center).
This is shown as two position values: The first indicating the absolute horizontal position, the second indicating the absolute vertical position. The two values are separated by space.
When position values are used, it refers to where the top left edge of the image is located within the element. Let's look at an example below:
In this example, the top left corner of the image is located 80px from the left of the element and 120px from the top of the element.
Negative position values can be used. When this happens, part of the background image will not be visible. Let's look at the example below:
Here, the horizontal position is -80px, meaning the image started 80px to the left of the left border of the element. Hence only part of the image is now visible.
The default value for background-position is [top left]. This is equivalent to specifying 0%, 0% in percentage values and 0, 0 for position values.