网站建设中百分数值与关键字紧密相关，不过其表现方式更为复杂。假设网站建设人员希望用百分数值将原图像在其元素中居中。这很容易：
p{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;
background-position:50% 50%;}
这会导致原图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和原图像。
下面更详细地分析这个过程。将原图像在一个元素中居中时，图像中描述为50% 50%的点（中心点）与元素中描述为50% 50%的点（中心点）对齐。如果图像位于0%0%,
其左上角将放在元素内边厍区的左上角。如果图像位置是100% 100%，会使原图像的右下角放在内边距区的右下角：
p{background-image:url(oransqr.gif)；background-repeat:no-repeat;
padding:Spx;border:1px dotted gray;}
p.cl{background-position:0%0%;}
p.c2(background-position:50%50%;}
p.c3{background-position:100%100%;}
p.c4{background-position:0%100%;}
p.c5{background-position:100%0%;}
因此，如果网页设计者想将一个原图像放在水平方向1/3。垂直方向2/3处，可以声明如下：
p{background-image:url(bigyinyang.gif);
background-repeat:no-repeat;
background-positiori:33% 66%;}
利用这些规则，原图像中从图像左上角水平向右1/3、垂直向下2/3处的点将与离包含元素左上角最远的点对齐。注意，如果用百分数设置位置，水平值总是先出现。如果在上例中将百分数值的顺序换一下，图像将放在元素中水平向右2/3、垂直向下丨/3处。
如果只提供了一个百分数值，所提供的这个值将用作为水平值，垂直值假设为50%，这与关键字类似，即如果只指定了一个关键字，另一个关键字则假设为center。例如：
p(background-image:url(yinyang.gif)；
background-repeat:no-repeat;
background-position:25%;}
原图像位于元素内容区和内边距区水平向右1/4，垂直向下1/2处。
等价关键字
等价百分数
center
center center
50% 50%
50%
top
top center
center top
50% 0%
bottom
bottom center
center bottom
50% 100%
right
center right
100% 50%
right center
100%
left
center left
0% 50%
left center
0%
top left
left top
0% 0%
top right
right top
100% 0%
bottom right
right bottom
100% 100%
bottom left
left bottom
0% 100%
你在建设网站可能会奇怪，background-position的默认值是0% 0%，这在功能上就相当于top left。正是因为这个原因，背景图像总是从元素内边距区的左上角开始平铺，除非你设置了不同的位置值。