background-position属性用于指定背景图片的初始位置。这个位置是相对于属性指定的背景图层位置的位置。
background-position 属性通过提供X和Y坐标的值来设置背景图像的初始位置。
注意，如果你在设置了 background-position 属性之后，再为元素设置简写方式的 background 属性，简写方式中又没有设置 background-position 属性，那么 background-position 属性的值会被重置为它的初始值。
如果你为元素设置了多个背景图像，可以为每个背景图像分别设置一个 background-position 属性，各个属性值之间使用逗号来分隔，每一个属性值和一张背景图片对应。
官方语法
background-position: <position> [ , <position> ]*
参数：<position>是一到四个背景图像到元素边界2D距离的数值。这个数值可以是相对值，也可以是绝对值。注意：这个位置可以设置在盒模型之外。
<position>可以是百分比值，CSS长度值或偏移关键字 top , left , bottom , right 和 center 。
它的具体取值可以是下面的任意一种：
<percentage> <percentage> ：可以是一对百分比值。 0% 0% 表示背景图像的左上角位置位于盒模型padding box区域的左上角位置。 100% 100% 表示背景图片的左上角位于padding box区域的右下角位置。 <length> <length> ：也可以是一对具体的CSS测量单位值。例如 100px 200px 表示背景图像位于padding box区域的左上角X方向向左偏移100像素，Y方向向下偏移200像素的位置。 top left 和 left top ：和 0% 0% 相同。 top , top center 和 center top ：和 50% 0% 相同。 right top 和 top right ：和 100% 0% 相同。 left , left center 和 center left ：和 0% 50% 相同。 center 和 center center ：和 50% 50% 相同。 right , right center 和 center right ：和 100% 50% 相同。 bottom left 和 left bottom ：和 0% 100% 相同。 bottom , bottom center 和 center bottom ：和 50% 100% 相同。 bottom right 和 right bottom ：和 100% 100% 相同。如果只设置了一个值，那么这个值为水平位置的值，垂直位置的值为50%。
你可以混合使用百分比值，CSS长度值和关键字。位置的值可以是一个负数。
例如下面的示例代码都是有效的背景图片位置的CSS代码：
background-position: 20px;
background-position: 20px 50px;
background-position: 30% 75%;
background-position: top left;
background-position: top 100px;
background-position: -300px 45px;
下面的示例代码为多个背景图片设置初始位置：
.element {
background-image: url(image1.jpg), url(image2.jpg);
background-position: top left, 50% 50%;
}
适用范围
background-position 属性可以使用在所有元素上。
在线演示第一个例子设置背景图片的 background-position 属性为关键字： top center 。
第二个例子设置背景图片的 background-position 属性为百分比数： 20% 75% 。
浏览器支持
所有的现代浏览器都支持 background-position 属性，包括：Chrome, Firefox, Safari, Opera, IE浏览器以及Android和iOS系统浏览器。
查看更多关于background-position的详细内容...