background屬性非繼承屬性。設定背景色、背景圖像相關5個屬性值(background-color、background-image、background-repeat、background-attachment、background-position)。各屬性值併排，並以半形空白做區隔。可任意排列，亦可省略其中一項屬性值。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| background | all | background-color background-image background-repeat, background-attachment background-position |
background-color → 設定背景的顏色 background-image→ 設定背景圖像檔的位置 background-repeat→ 設定背景的圖像是否重複出現 background-attachment→ 設定背景的圖像是否固定 background-position→ 設定背景的圖像的配置 |
h3.sample {
background : url(it.gif) no-repeat left bottom;
}
background-color屬性非繼承屬性，設定元素的背景顏色。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| background-color | all | 顏色 transparent(default) inherit |
→ 16進位RGB、Color Name → 透過顯示上層元素的背景色 → 強制繼承上層元素的屬性值 |
h3.sample {
color: white;
background-color: red;
}
background-image屬性非繼承屬性，設定元素的背景圖像。同時設定有背景顏色時，以背景圖像優先顯示。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| background-image | all | URI none inherit |
→ 指定圖像檔的所在位置 → 不指定 → 強制繼承上層元素的屬性值 |
h3.sample {
background-color: red;
background-image : url(it.jpg);
}
background-repeat屬性非繼承屬性，設定元素的背景圖像是否重複顯現。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| background-repeat | all | repeat(default) repeat-x repeat-y no-repeat inherit |
→ 橫向、縱向都重複顯現 → 橫向重複顯現 → 縱向重複顯現 → 禁止重複顯現 → 強制繼承上層元素的屬性值 |
h3.sample {
background-color: red;
background-image : url(it.jpg);
background-repeat: no-repeat;
}
background-attachment屬性非繼承屬性，設定元素的背景圖像是否隨視窗卷軸移動。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| background-attachment | all | fixed scroll(default) inherit |
→ 固定，不隨視窗卷軸移動 → 隨視窗卷軸移動 → 強制繼承上層元素的屬性值 |
h3.sample {
background-image : url(it.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
}
background-position屬性非繼承屬性，設定元素的背景圖像在背景領域內重複出現的初期位置。只有設定1個數值時，適合左右方向的配置，上下自動適用50%的值。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| background-position | all | 長度 百分比(%) left right center top bottom inherit |
→ em、px等長度，左上(0,0)為基準的距離 → 背景領域的百分比位置 → 只能設定左右方向，靠左配置(和0%同值) → 只能設定左右方向，靠右配置(和100%同值) → 左右、上下方向皆可設定，靠中配置(和50%同值) → 只能設定上下方向，靠上配置(和0%同值) → 只能設定上下方向，靠下配置(和100%同值) → 強制繼承上層元素的屬性值 |
h3.sample {
background-image : url(output.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : left;
}
color屬性繼承屬性，設定前景色(文字色)。沒有文字的元素像hr，IE可藉color來指定水平分隔線的顏色，但是其他的瀏覽器必須使用background-color屬性來指定。因此，這種情形最好兩者都設。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| color | all | 顏色 inherit |
→ 16進位RGB、Color Name → 強制繼承上層元素的屬性值 |
h3.sample {
background-color: red;
color: white;
}