How the background-position 50% 50% is calculated

Background-position:value1 value2

The values of value1 and value2 can be absolute values or percentages, most of which are well understood, but how are the two values of 50% 50% calculated?

The picture is centered horizontally and vertically. and Background-position:center Center, the effect is equal.

is equivalent to the width of the x:{container (container)-the width of the background picture is}*x percent, and the excess portion is hidden.
is equivalent to the height of the y:{container (container)-the height of the background image is}*y percent, and the excess portion is hidden.

For example:. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll 50% 50%;
border:5px solid Green;
}

Its x= (300-210) *50%=45px;

Y= (150-120) *50%=15px;

Effect

Since the part does not extend to both ends, we can first make a wide enough width picture to set the horizontal value to 50%, which can be used to adapt to different browsers, so that the picture is filled with the browser window and center. Replaces the MARGIN:50 Auto feature.

How the background-position 50% 50% is calculated