CSS 允許應用純色（background-color）作為背景，也允許使用背景映像（background-image）建立相當複雜的效果。CSS 在這方面的能力遠遠在 HTML 之上。
一、背景顏色
可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。可以為所有元素設定背景色，這包括 body 一直到 em 和 a 等行內元素。比如下面這條規則把<p></p>元素的背景設定為灰色：
p {background-color: gray;}
如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：
p {background-color: gray; padding: 20px;}
background-color 不能繼承，其預設值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。
背景顏色的樣本：
<html><head><style type="text/css">/*設定body的背景色為黃色*/body {background-color: yellow}/*設定一級標題的背景顏色為綠色*/h1 {background-color: #00ff00}/*設定二級標題的背景顏色為透明*/h2 {background-color: transparent}/*設定所有段落的背景顏色為粉紅色*/p {background-color: rgb(250,0,255)}/*設定class屬性值為no2的段落的背景顏色為灰色，並且有20px的內邊矩*/p.no2 {background-color: gray; padding: 20px;}</style></head><body><h1>這是標題 1</h1><h2>這是標題 2</h2><p>這是段落</p><p class="no2">這個段落設定了內邊距。</p></body></html>
二、背景映像
1.基本文法
要為元素設定背景映像，需要使用 background-image 屬性。background-image 屬性的預設值是 none，表示背景上沒有放置任何映像。如果需要設定一個背景映像，必須為這個屬性設定一個 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
元素的background-image屬性 也不能繼承。事實上，所有背景屬性都不能繼承。
2.背景映像的應用範圍
大多數背景都應用到 body 元素，不過並不僅限於此。下面例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
甚至可以為行內元素設定背景映像，下面的例子為一個連結設定了背景映像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
3.背景映像的重複
如果需要在頁面上對背景映像進行平鋪，可以使用 background-repeat 屬性。background-repeat屬性取值： repeat 導致映像在水平垂直方向上都平鋪，repeat-x 和 repeat-y 分別導致映像只在水平或垂直方向上重複，no-repeat 則不允許映像在任何方向上平鋪。
預設情況下，背景映像將從一個元素的左上方開始。請看下面的例子：
/*為body元素設定垂直平鋪的背景映像*/body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }
4.背景映像的定位
可以利用 background-position 屬性改變映像在背景中的位置。 為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景映像的放置稍有差異。下面的例子在 body 元素中將一個背景映像置中放置：
/*為body設定沒有平鋪而且置中的背景映像*/body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}
5.背景映像關聯
如果文檔比較長，那麼當文檔向下滾動時，背景映像也會隨之滾動。當文檔滾動到超過映像的位置時，映像就會消失。可以通過 background-attachment 屬性防止這種滾動。background-attachment 屬性的預設值是 scroll，也就是說，在預設的情況下，背景會隨文檔滾動。可以通過改變這個屬性的值，聲明映像相對於可視區是固定的（fixed），因此不會受到滾動的影響：
/*為body設定固定的背景*/body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }
三、background簡寫屬性
可以通過background 簡寫屬性在一個聲明中設定所有的背景屬性。
可以按順序設定如下屬性：
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
如果不設定其中的某個值，也不會出問題，比如 background:#ff0000 url('smiley.gif'); 也是允許的。建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。
/*通過簡寫屬性，在一個聲明中設定所有的背景屬性*/body{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; }
參考：http://www.w3school.com.cn/css/pr_background.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
