css背景图片的位置：background的position

position的两个参数：水平方向的位置，垂直方向的位置----------该位置是指背景图片相对于前景对象的

1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/
表示背景图片在指定div的位置，从左上角开始

2.background:url(../image/header.jpg) no-repeat right bottom;  /*相当于100%   100%*/
表示背景图片从指定div的右下角开始显示图片，并且背景图片右下角与div的右下角重合

3.background:url(../image/header.jpg) no-repeat 300px 200px;   
即背景图片距div的左边界300px，距div的上边界200px。

4.background:url(../image/header.jpg) no-repeat 50% 50% ;  
/* 相当于background:url(../image/header.jpg) no-repeat center ; */
背景图片在div中水平方向与竖直方向都居中显示

5.background:url(../image/header.jpg) no-repeat 300px;   /*相当于300px 50%*/
若只写一个参数，则另一个参数默认为50%，即背景图片距div的左边300px，而竖直方向居中。

6.background:url(../image/header.jpg) no-repeat -300px -100px ;
背景图片相对于div左上角（0px，0px） 又向左移动了300px，向上移动了100px

7.background:url(../image/header.jpg) no-repeat 30% 30%;  

背景图片的（30%， 30%）的点与其所属的div的（30%， 30%）的点对齐。

但注意：百分比值同时应用于元素div及其背景图像。
例如：
（1）当在某一元素里居中背景图像时，图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
（2）要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明：
         background:url(beijing.gif)   no-repeat  33% 66%; 
         这就使得图像上相对于左上角水平为三分一，垂直为三分之二的那个点与元素中的同样的点重合。

  注意，百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置，那么背景图像将被放于水平三分之二，垂直三分之一处。同样，当只给出一个百分比值时，这个值为水平值，而另一个垂直百分比值被假定为50%。当只有一个值给出时，另一个被假定为center。

以图为例：

  

1.

background-position:left top;(见图2).

背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。

等同于 background-position:0,0;

也等同于background-position:0%,0%;

2.

background-position:right bottom;(见图1)。

背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。

等同于background-positon:100%,100%;

也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

3.

background-position:500px 15px；(见图3)。

背景图片从容器(container)左上角的地方向右移500px,向下移15px，超出的部分隐藏。

4.

background-position:-500px -15px;(见图4)。

背景图片从容器(container)左上角的地方向左移500px，向上移15px，超出的部分隐藏。

5.

background-position:50% 50%;(见图5)。

等同于left：{容器(container)的宽度—背景图片的宽度}*left百分比，超出的部分隐藏。

等同于right：{容器(container)的高度—背景图片的高度}*right百分比，超出的部分隐藏。

例如：background-position:50% 50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background- position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px，向下移235px；

6.（这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显）

background-position:-50% -50%;(见图6)。

等同于left：-{{容器(container)的宽度—背景图片的宽度}*left百分比（百分比都取正值）}，超出的部分隐藏。

等同于right：-{{容器(container)的高度—背景图片的高度}*right百分比（百分比都取正值）}，超出的部分隐藏。

例如：background-position:-50% -50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即 background- position:-250px,-70px;也就是背景图片从容器(container)的左上角向左移250px，向上移70px；