How to use the background image position background-position in CSS

When using the background picture, often encounter the background picture where the location is not what we want, how to set the background image position? The following is a description of the use of the background image position background-position in CSS.
In the background picture position property of the picture, Background-position is used to control the position of the element background picture. It accepts three kinds of values:

Keywords: such as top, right, bottom, left, center
Length values, such as PX, EM, REM, etc.
Percent:%
The most commonly used values, or best known values, are keywords and length values, with percentages of up to 0%, 50%, and 100%.
In the background picture position property, the property value generally has 2, the first represents the horizontal position, is the x axis, the second represents the vertical position, that is, the Y axis, using two attribute values to define the starting position of the background picture, if the starting position of the two direction is the same, you can use a value.

The meanings of some of these property values are as follows:

Top: The initial position of the background image is the top of the element

Center: The starting position of the background image is the middle of the element

Left: The starting position of the background picture is the element

Right: The starting position of the background picture is the element

Bottom: The starting position of the background image is the bottom of the element

Example: Setting the background image to the left and bottom, while defining the background image uneven.

<! DOCTYPE html>
：


The above is a brief introduction of background-position, hope to help you!