How to use the background position position in css

This article will explain in detail how to use the background position position in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Syntax:

Background-position: length | | length

Background-postiton: position | | position

Length: percentage | length value consisting of floating point numbers and unit identifiers

Positon: top | center | bottom | left | center | right bearing noun

Note:

The backgroud-image property must be specified

Postion is followed by X and y coordinates. You can use orientation nouns or precise units.

If only one orientation noun is specified, the other value defaults to center alignment, which is 50%

If only one value is specified, the value is used for the X coordinate, and the other is the y coordinate by default, which is centered by default.

If it is an exact coordinate, the first is the x coordinate and the second is the y coordinate.

If two values are specified and both values are locative nouns, the order of the two words is irrelevant, for example, left top and top left have the same effect.

If you specify two values, a mixture of exact units and azimuth names, the first value is the x coordinate and the second value is the y coordinate.

Div {width: 600px; height: 300px; background-color: pink; background-image: url (images/ldh.jpg); background-repeat: no-repeat / * upper left corner * / background-position: left top; / * horizontal and vertical center * / background-position: center center / * 50px*/ background-position: 10px 50px from the left 10px distance; / * x coordinate 10px is vertically centered * / background-position: 10px } this is the end of the article on "how to use position in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.