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系统浏览器。