CSS---background属性及其属性值

CSS属性：

background-color/*背景颜色*/
background-image/*背景图片*/
background-repeat/*设置背景图像是否重复，及如何重复*/
background-attachment/*背景图像是否固定或者随着页面的其余部分滚动*/
background-position/*设置背景图像的起始位置*/
background/*简写属性*/

1、background-color：

颜色值通常以以下方式定义：

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1 {background-color:#ff0000;}
p {background-color:rgb(255,0,0);}
div {background-color:red;}

2、background-image:

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body {background-image:url('background.jpg');}

提示：可以设置一种背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

body {
background-image:url('background.jpg');
background-color:#ffffff;
}

3、background-repeat：

常用属性：

repeat：背景图像将向垂直和水平方向重复。这是默认
repeat-x:只有水平位置会重复背景图像
repeat-y:只有垂直位置会重复背景图像
no-repeat:背景图像不会重复

例：

body
{
background-image:url('background.jpg');
background-repeat:repeat-y;
}

4、background-position：

left top:左上
left center：左中
left bottom：左下
right top：右上
right center：右中
right bottom：右下
center top：居中置顶
center center：水平垂直居中
center bottom：居中置底
以上这些属性值，只写一个时，另一个默认为center
x% y%：x是水平位置，y是垂直。左上角是0％0％。右下角是100％100％。
xpos ypos:x是水平位置，y是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位
以上两个属性值，只写一个时，另一个为50%

注意：使用该属性，background-attachment必须设置为 “fixed（固定）”.

body
{ 
	background-image:url('background.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}

4、background-attachment：

scroll: 背景图片随页面的其余部分滚动。这是默认
fixed:背景图像是固定的

body 
{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}

5、background简写属性

当使用简写属性时，属性值的顺序为：:
1.background-color
2.background-image
3. background-repeat
4. background-attachment
5. background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.

body {background:#ffffff url('background.jpg') no-repeat right top;}