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 | 設置背景圖片如何重複 |