background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。
例子div {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
background-repeat: no-repeat;
background-position: center center;
background-image: url(img/bg.gif);
}
背景图像有 3 种定位方式
关键字定位
水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。
关键字定位，应用的是对齐规则，而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐
上述例子定位，就表示背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置
百分比定位
x% y%：表示使用百分比定位，是将图像本身(x%, y%)的那个点，与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标的计算公式为：
x = (对象的宽度 - 图像的宽度) * x%;
y = (对象的高度 - 图像的高度) * y%;
当然，百分比的值也可以是负值，计算公式依然不变
上面的例子，把百分比改为 -50% -50%。此时，得到背景图像起始位置的坐标为：
x：(200px - 100px) (-50%) = 100px (-50%) = -50px
y：(200px - 100px) (-50%) = 100px (-50%) = -50px
长度值定位
x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中(x, y)所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。
偏移量长度可以是正值，也可以是负值。x 为正值表示向右偏移，负值表示向左偏移；y 为正值表示向下偏移，负值表示向上偏移。背景图像发生移动后，就有可能超出对象的背景区域。此时，超出的部分将不会显示，只会显示落入背景区域的部分。
