网站建设中利用background-repeat，可以把一个大图像放在文档的背景中，然后使之一直重复。在此基础上，下面来看如何改变图像在背景中的位置。

例如，可以在body元素中将一个背景图像居中放置，其结果如图9-21所示：

body{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-position:center;}

这里在背景上放了一个图像，然后使用值no-repeat使之不能重复。每个包含图像的背景都从一个图像开始，再根据background-repeat的值重复（或不重复）。这个起点称为原图像（origin image）。

background-position值：[[<percentage>|<length>|left | center | right][<percentage>]|<length>I top | center | bottom]?]||[[left|center | right]||[top | center | bottom]]I inherit

初始值：0%0%

应用于：块级元素和替换元素

继承性：无

百分数：相对于元素和原图像上的相应点（见本章后面“百分数值”一节的解释）

计算值：如果指定了<length>，则为绝对长度偏移，否则，是百分数值

网站建设原图像的放置由backgroimd-position属性决定，为这个属性提供值有很多方法。首先，网页设计人员可以使用一些关键字：top、bottom,left,right和center。通常，这些关键字会成对出现，不过（如前面的例子所示）也并不总是这样。还可以使用长度值，如50px或2cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差别。

还要提到一点：这就是放置背景图像的上下文。网站建设CSS2和CSS2.1指出，网页设计人员根据background-position，将相对于元素的内边距边界放置原图像。换句话说，放置图像的上下文是内边框边界，尽管背景区会延伸到外边框边界。并非所有浏览器都能正确地放置图像，有些浏览器就会相对于外边框边界而不是内边框边界来放置原图像。不过如果没有边框，无论是哪一种浏览器，效果都是一样的。

注意：如果有人想了解多年来CSS有什么改变，可以告诉你，CSS1相对于内容区定义图像的放置。

尽管有图像放置的上下文，不过完全平铺的背景图像确实会填充边框区的背景，因为平铺图像会在4个方向上延伸。稍后会更详细地讨论这一点。首先，需要了解原图像在元素中如何定位。