CSS learning: about background-position

In the Rainer's css Manual, the background-position is written as follows:
The default value is 0% 0%. In this case, the background image is located in the upper left corner of the content area of the object that does not include the patch.
If only one value is specified, the value is used for abscissa. The default ordinate value is 50%. If two values are specified, the second value is used for ordinate.
If the value is set to right center, right will overwrite the center value as the abscissa value, so the background image will be located on the right.
In fact, this is not the case. The Two root values are automatically determined based on semantics.
For example, the display effects of background-position: left top; and background-position: top left are the same. top applies to y coordinates to align the background image and left to align the background image.
Run code box

The code is as follows:	Copy code
<Style type = "text/css"> Body { Background-image: url (http: // images/logo.gif ); Background-position: left top; Background-repeat: no-repeat; } </Style>

[Ctrl + A Select All tips: You can modify some code and then press run]
Run code box

The code is as follows:	Copy code
<Style type = "text/css"> Body { Background-image: url (http: // images/logo.gif ); Background-position: left top; Background-repeat: no-repeat; } </Style>

[Ctrl + A Select All tips: You can modify some code and then press run]
If the background-position: 100px left is specified, because left has been applied to the x coordinate, 100px applies to the y coordinate, which is consistent with the background-position: left 100px effect.
Run code box

The code is as follows:	Copy code
<Style type = "text/css"> Body { Background-image: url (http: // images/logo.gif ); Background-position: 100px left; Background-repeat: no-repeat; } </Style>

[Ctrl + A Select All tips: You can modify some code and then press run]
Run code box

The code is as follows:	Copy code
<Style type = "text/css"> Body { Background-image: url (http: // images/logo.gif ); Background-position: left 100px; Background-repeat: no-repeat; } </Style>