How to use background-position in CSS

A. Background-position:left top;

The upper-left corner of the background picture is aligned with the upper-left corner of the container (container), and the excess is hidden. Equal to the background-position:0,0, also equal to the background-position:0%,0%;

Two. Background-position:right Bottom;

The bottom right corner of the background picture is aligned with the lower right corner of the container (container), and the excess is hidden. equivalent to background-positon:100%,100%; Background-positon: The width of the container (container)-the width of the background picture, the height of the container (container)-the height of the background picture

Three. background-position:500px 15px;.

The background picture moves from the top left corner of the container (container) to the right 500px, moves down 15px, and the excess part is hidden.

Four. background-position:-500px-15px;

The background picture moves from the top left corner of the container (container) to the left 500px, moves upward 15px, the excess part hides.

Five. background-position:50% 50%;.

Equivalent to the width of the left:{container (container)-the width of the background picture is}*left percent, and the excess is hidden. Equivalent to the height of the right:{container (container)-the height of the background picture}*right percent, the excess part hidden.

Six. background-position:-50%-50%;.

Equivalent to the width of the left:-{{container (container)-the width of the background picture is}*left percentage (the percentage is positive)}, and the excess is hidden. is equivalent to the height of the right:-{{container (container)-the height of the background picture is}*right percentage (the percentage is positive)}, and the excess is hidden.