CSS层叠样式表背景图片位置属性

如何把背景图片放在页面的中央?
我想设置背景图片的位置?

解释


用法:
background-position: center | top | bottom | top left | top center | top right | bottom left | bottom center | bottom right ;
background-position: 50% 50%;
background-position: 200 200;
定义:
这个标记是用来设置背景图片的最初位置。为保证正常工作,背景图片重复设置成 no-repeat(没有重复)。
可以把标记设置成以下的值。
a)center | top center | ... :这些值是用来定义图片最初位置的。就像这些给定的值 "top center"或者"top left"或者"top right"等类似的值。
b)50% 50% : 值是以50% 60%百分数来给定的。意思就是背景图片的最初位置是放在距离左页面50%、距离页面顶端60%的位置。
c)200 200 :值也可以按照像素来给定。
上述所有的值都是位于对象区域内,如果你是在div标记中设置,则区域50意味着从该div标签开始位置起50。

示例1:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: bottom center;"> 颜色名称 <br><br><br></div>
结果:
颜色名称

示例2:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: 50% 50%;"> 颜色名称 <br><br><br></div>
结果:
颜色名称

示例3:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: 50 50;"> 颜色名称 <br><br><br></body>
结果:
颜色名称