css中我们经常使用background加载图片作为背景，这个背景图片可以通过具体属性的设置调整其上下左右偏移，调整背景图的上下左右偏移可以通过设置background属性或background-position属性来实现。我们以div加背景图片来举例子，其他的容器也都一样。主要来介绍一下背景background/background-position的几个属性。

background语法格式：

[php]background:[1.color] [2.url(图片路径)] [3.background-repeat平铺属性] [4.水平方向偏移] [5.垂直方向偏移]

background-position:[水平方向偏移] [垂直方向偏移][/php]

我们给一个div加上背景后，先仅仅控制背景图片的路径，其他的都不做控制。这时候背景图片的坐标是左上角，如果图片大小大于div的大小，多出来的部分会被切掉，如果图片大小小于div的大小，默认会在横向和纵向都把图片进行平铺，也就是你会看到好几个背景图片铺着，来把div填满。要取消掉这种效果，使用background-repeat属性。

background-repeat平铺属性的几个值：

[php]repeat : 默认值。背景图像在纵向和横向上平铺

no-repeat : 背景图像不平铺

repeat-x : 背景图像仅在横向上平铺

repeat-y : 背景图像仅在纵向上平铺[/php]

下面来看如何控制背景图片的位置。background的4和5属性和backgroudn-position是控制位置使用的偏移属性，这2个属性分别来控制水平偏移和垂直方向偏移。

位置偏移属性可以取的值有百分数、数值、位置三种。取值是图片的左上角相对于区域左上角的偏移量。向右，向下(x正半轴，y负半轴)为正值；向左，向上(x负半轴，y正半轴)为负值。位置的话，水平方向上是left(靠左),center(居中),right(靠右)；垂直方向上是top(靠顶),center(居中),bottom(靠底)。例如：

[php]background:url(your/pic/path) no-repeat 50% 50%;#表示在水平和垂直方向是都是居中的

background-position:50% 50%; #表示在水平和垂直方向是都是居中的

background:url(your/pic/path) no-repeat 10px 10px; #表示以左上角为原点，分别偏移了10px的位置

background-position:10px 10px; #表示以左上角为原点，分别偏移了10px的位置

background:url(your/pic/path) no-repeat left bottom; #表示背景图片靠左下角

background-position:left bottom; #表示背景图片靠左下角[/php]

这三种数值也可以组合使用

[php]background:url(your/pic/path) no-repeat 10px center; #向右10px，垂直居中

background-position:10px center; #向右10px，垂直居中

background:url(your/pic/path) no-repeat center 50%; #水平垂直都居中

background-position:center 50%; #水平垂直都居中[/php]

当图片比div大的时候，background-position控制位置和比div小时控制效果是一样的。可以通过background-position来控制显示图片的哪一部分来作为背景图片。

一些例子：

[php]background-position例子:

[/php]

background-postion例01

background-postion例02

background-postion例03

background-postion例04

background-postion例05

background-postion例06

background-postion例07

background-postion例08

background-postion例09

background-postion例10

background-postion例11

background-postion例12

[php]background例子:

[/php]

background例01

background例02

background例03

background例04

background例05

background例06

background例07

background例08

background例09

background例10

background例11

background例12