background-position属性用于指定背景图片的初始位置。这个位置是相对于background-origin属性指定的背景图层位置的位置。
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系统浏览器。
