网站建设和设计的时候，考虑到网站背景图片的定位要求，可以使用CSS背景图片位置属性background-position
通过网站背景图片的位置属性 background-position 可以改变背景图片的初始位置。

其语法格式如下：

backgroud-position:<百分比> | <长度> | <关键字>

需要说明如下几点：
（1）以百分比的方法设置backgroud-position 的方法如下：
backgroud-position: x% y%

其中，x%代表设置图片的水平位置；y%代表图片的垂直位置。初始为 0% 0%。例如
p{backgroud-position: 70% 50%;repeat-y;url(..\pic\sky.jpg)}.
其中省略了CSS关了网站背景图片的设置的属性backgroud-repeat和backgroud-image,..\pic\sky.jpg)是图片位置。

（2）以长度的方法设置backgroud-position 的方法如下：
backgroud-position: x y

使用长度单位可以对网站的背景图片的位置进行精确的控制，设定水平和垂直位置的起点。

p{background-position:70px 10px;url(..\pic\sky.jpg)}表示从左起70像素，垂直10像素的位置开始显示图片。

（3）以关键字的方法设置backgroud-position 的方法如下：
backgroud-position:[top \center\bottom] [left\center\right]
水平方向 垂直方向的

top 顶部对齐 (图片的垂直位置为 0%)
bottom 底部对齐 (图片的垂直位置为 100%)
left 左边对齐 (图片的垂直位置为 0%)
right 右边对齐 (图片的垂直位置为 100%)
center 图片水平，垂直位置都为50%

关键字方法和百分比方法的比对：

top left =left top 0% 0%

top =center top =top center 50% 0%

right top = top right 100% 0%

left =left center =center left 0% 50%

center =center center 50% 50%

right =center right =right center 100% 50%

bottom left =bottom right 0% 100%

bottom =bottom center =center bottom 50% 100%

bottom right = right bottom 100% 100%

本课主题：网站背景图片定位

相关主题：
固定网站背景图像
重复网站背景图像 background-repeat
网站的背景颜色和背景图片
网页文字首行缩进
网页文字对齐
请拨打热线：0571-86586571