CSS Learning: About Background-position

Css

In Rainer's CSS manual, Background-position wrote:

The default value is: 0% 0%. The background picture is positioned at the top-left corner of the content area where the object does not include patches (padding).
If only one value is specified, the value is used for the horizontal axis. The ordinate will default to 50%. If two values are specified, the second value is used for ordinate.
If you set the value to right center, the background image will be positioned on the right-hand side because it overrides the center value as the horizontal axis value.

It's not all like this, its 2-value roots are automatically judged by semantics.
such as Background-position:left top; and Background-position:top left; the top action in the Y coordinate aligns the background picture, and leave aligns the background picture.

Run Code Box

<style type= "Text/css" >body {background-image:url (logo.gif); Background-position:left top; Background-repeat: No-repeat;} </style>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Run Code Box

<style type= "Text/css" >body {background-image:url (logo.gif); Background-position:left top; Background-repeat: No-repeat;} </style>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

If background-position:100px left is specified, 100px acts on the Y coordinate because left is already used for x-coordinate, and it is consistent with the Background-position:left 100px effect.

Run Code Box

<style type= "Text/css" >body {background-image:url (logo.gif), background-position:100px left; Background-repeat:no-repeat;} </style>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Run Code Box

<style type= "Text/css" >body {background-image:url (logo.gif); Background-position:left 100px; Background-repeat:no-repeat;} </style>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]