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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body
{
background-image:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
