background-position : The position property to position the background image.
The background-position property sets the starting position of the background image. This property sets the position of the background original image, from which the background image is to be repeated if it is to be repeated. The background-attachment property needs to be set to "fixed" for this property to work correctly in Firefox and Opera.
The default position of the background image is 0,0 . The image expands from the top left, taking up the entire background space.
When the x value is set to 50px, when 50px, the initial position of the image is moved 50px from top left to right and 50px down:
All browsers support the background-position property.
(1) Keyword pattern definition:
Position keywords include top, left, bottom, right. If only one keyword is specified, the second value will be "center".
If you define background-position: top, it is equivalent to defining: background-position: top, center.
(2) Definition of percentage mode:
x% y%, the first value is the horizontal position and the second value is the vertical position.The upper left corner is 0% 0%. The bottom right corner is 100% 100%. If only one value is specified, the other value will be 50%.
If you define background-position: top, then it is equivalent to defining: background-position: 30% is equivalent to defining If you define background-position: top, then it is equivalent to defining: background-position: 30%, 50%.
(3) Position definition mode:
xpos ypos The first value is the horizontal position and the second value is the vertical position. The upper left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit.
If only one value is specified, the other value will be 50%. It is also possible to mix % and position values. Such as background-position: 30px, 50%.