background-position 用来定义背景图片位置，是 CSS background 的属性之一，常与 background-image、background-repeat 搭配设计，让网页背景图片靠上、下、左、右甚至是置中显示，设计时需使用水平与垂直方向的位置，可以给数字、百分比或方向参数，让图片能够在正确的位置呈现，background-position 是标准的 CSS 背景位置设计方法，所有的主流浏览器都支持 background-position。

background-position 基本语法

background-position: 背景图片水平位置参数 背景图片垂直位置参数 ;

通常使用水平方向以及垂直方向的组合来定义背景图片呈现的位置。例如「background-position:left top;」这样代表背景图片靠左上角对齐，除此之外，还可以使用「靠左与靠上的距离」以及「靠左与靠上的百分比」来设计，示例还会详细说明。

可以使用的方向参数

示例一、各种对齐方式

background-position:right bottom;　// 靠右靠下对齐

background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置

background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置

background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置

以上示例要确保正确显示，需搭配 background-repeat:no-repeat 告诉浏览器背景图片不要重覆显示。特别要注意的是，如果使用了简化写法，只写一个属性值，另一个属性值将会自动取中间值，为了将来管理方便，建议两个方向的属性值都写上去比较好。

示例二、垂直置中对齐

body{

　background-image:url('背景图片');　//先给你想要放在背景的图片路径或网址

　background-repeat:no-repeat;　//背景图片不要重覆显示（仅显示一次）

　background-attachment:fixed;　//背景图片位置固定

　background-position:center;　//背景图片水平位置与垂直位置均置中对齐

}

垂直置中算是比较特别的一种写法，只需要写一个属性值 center 即可，因为另外一个方向会自动取中间值。示例将背景图片的位置设为固定（background-attachment:fixed）的主要原因是让鼠标上下滑动的时候，背景图片不会跟着被移动，不过这样的效果只适用在网页背景或是 textarea 这类网页元素中，在 DIV 区块内使用并没有太大的意义。另外，background-position 不只是单纯的用来设计网页背景图片位置，也能用来设计 DIV 区块内的背景图片位置，用法是一样的。