CSS中的background-position属性允许您在其容器内移动背景图像（或渐变）。
html {
background-position: 100px 5px;
}
它有三种不同类型的值：
- 长度值（例如100px 5px）
- 百分比（例如100% 5%）
- 关键字（例如top right）
默认值为0 0，这会将背景图像放在容器的左上角。
长度值非常简单：第一个值是水平位置，第二个值是垂直位置。因此100px 5px会将图像向右移动100px，向下移动5个像素。
百分比的工作方式略有不同。将背景图像移动X％表示它会将图像中的X％点与容器中的X％点对齐。例如，50%表示它将图像的中间与容器的中间对齐。100%意味着它将图像的最后一个像素与容器的最后一个像素对齐，依此类推。
关键字只是百分比的快捷方式。top right比100% 0更容易记住表示右上角。以下是所有五个关键字及其等效值的列表：
- top：垂直0％
- right：水平100％
- bottom：垂直100％
- left：水平0％
- center：用在水平方向则水平50％。如果垂直方向，则垂直水平50％。
声明值
在现代浏览器中，最多可以为背景位置提供四个值（IE9以下不支持三个值和四个值）。
如果声明一个值，则该值为水平偏移量。浏览器将垂直偏移设置为center。
声明两个值时，第一个值是水平偏移量，第二个值是垂直偏移量。
当你开始使用三个或四个值时，情况会变得更复杂一些，但是你也可以更好地控制你的背景位置。
当您指定三个值时，浏览器将“缺失”的第四个值插入为0：
#threevalues {
background-position: right 45px bottom;
}
这将背景图像从右侧定位45px，从容器底部定位0px。
这是background-position四个值的例子：
#fourvalues {
background-position: right 45px bottom 20px;
}
这个将背景图像放置在右侧45px，放置在容器底部20px。
注意上面示例中值的顺序：关键字后跟长度单位。三个或四个值必须遵循该格式，并且关键字在长度或百分比单位之前。
