How to use css background-position property

The background-position property is used to set the starting position of the background image. The syntax is background-position: x y, where x represents the horizontal position and y represents the vertical position; there are many ways to assign values ​​to x and y, for example: top left, 3% 2%, xpos ypos.

How to use the css background-position property?

The background-position property can set the starting position of the background image.

Syntax:

background-position: x y

Values ​​that can be set:

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If only one keyword is specified, the other values ​​will be "center"
x% y%	The first value is the horizontal position, the second value is the vertical position. The upper left corner is 0% 0%. The lower right corner is 100% 100%. If only one value is specified, the other values ​​will be 50%. . The default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The upper left corner is 0. Units can be pixels (0px0px) or any other CSS unit. If only one value is specified, the other values ​​will be 50%. You can mix % and positions

Description: This attribute sets the position of the background original image (defined by background-image), the background image if you want Repeat, starting from this point.

Note: You need to set the background-attachment property to "fixed" to ensure that this property works properly in Firefox and Opera.

css background-position property example

 




提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

The above is the detailed content of How to use css background-position property. For more information, please follow other related articles on the PHP Chinese website!