CSS的背景属性用来定义元素的背景效果。
CSS背景属性：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
的background-color属性指定的元素的背景颜色。
网页的背景颜色设置是这样的：
使用CSS，颜色是最经常被指定：
- 一个有效的颜色名称-像"red"
- 一个十六进制值-象"#ff0000"
- 一个RGB值-像"rgb(255,0,0)"
看看CSS颜色值可能的颜色值的完整列表。
在下面的例子中， <h1>, <p>和<div>元件具有不同的背景色：
例
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} 试一试» 背景图
的background-image属性指定作为一个元素的背景使用图像。
缺省情况下，重复图像，这样它覆盖整个元件。
对于一个页面的背景图像可以设置这样的：
下面是文字和背景图像的不良组合的一个例子。 文字是很难读：
 | 注意：当使用背景图片，使用不打扰文本的图像。 |
|---|
背景图片 - 重复水平或垂直
缺省情况下， background-image属性水平和垂直方向重复的图像。
有些图片应该只在水平或垂直方向重复，否则将看起来很奇怪，就像这样：
如果图像重复以上操作仅在水平方向（ background-repeat: repeat-x;背景会更好看：
| 注意：要重复的图像垂直设置background-repeat: repeat-y; |
|---|
背景图片 - 设定位置和不重复
示出的背景图像仅一次也由指定的background-repeat属性：
在上面的例子中，背景图象显示在相同的位置的文本。 我们想要改变图像的位置，使得它不干扰文本太多。
的图像的位置被指定的background-position属性：
例
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
试一试» 背景图片 - 固定位置
要指定背景图片应该是固定的，使用（不会与页面的其余部分滚动） background-attachment属性：
例
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
试一试» 背景 - 速记属性
为了缩短代码，它也可以指定在一个单一的属性的所有背景属性。 这就是所谓的速记属性。
背景速记属性background ：
当使用速记属性的属性值的顺序是：
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
如果属性值中的一个丢失，只要其他的是在这个顺序也没关系。
自测练习用！
所有的CSS背景属性
| 属性 | 描述 |
|---|---|
| background | 设置在一个声明中所有的背景属性 |
| background-attachment | 设置背景图像是否是与页面的其余部分固定或滚动 |
| background-color | 设置元素的背景色 |
| background-image | 设置背景图像为元素 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图片如何重复 |