在CSS里面，每個元素盒子都可以想象成由兩個圖層組成。

前景層：內容（如文本或圖片）和邊框。

背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景圖片（使用 background-image 屬性），背景圖片疊加在背景顏色之上。

    在 CSS3 被瀏覽器實現之前，只能在背景顏色上添加一張圖片。而現在，我們可以為背景圖層添加多張圖片（以及 CSS3 漸變）。

CSS背景屬性：

    background-color
    background-image
    background-repeat
    background-position
    background-size
    background-attachment
    background（簡寫屬性）
    background-clip、background-origin、background-break（目前尚未得到廣泛支持）

背景顏色

格式：background-color: 顏色值;
示例：background-color: #caebff;

背景圖片

格式：background-image:url(圖片路徑/圖片文件名);
示例：background-image:url(images/blue_circle.png);

    默認情況下背景圖片會 以元素左上角為起點，沿水平和垂直方向重復出現，最終填滿整個背景區域。

背景重復

格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
說明：

    repeat 默認值，水平和垂直方向都重復，直至填滿元素的背景區域為止。
    repeat-x 水平方向重復。
    repeat-y 垂直方向重復。
    no-repeat 任何方向上都不重復（只讓背景圖片顯示一次）。

背景位置

    用于控制背景位置的 background-position 屬性，是所有背景屬性中最復雜的。

該屬性有5個關鍵字值，分別是 top、left、bottom、right 和 center，這些關鍵字中的任意兩個組合起來都可以作為該屬性的值。

background-position 屬性同時設定元素和圖片的原點。原點決定了元素和圖片中某一點的水平和垂直坐標。默認情況下，background-position的原點位于左上角。

    第一種情況，使用關鍵字來設定位置。background-position屬性的默認值 top、left 控制著水平和垂直方向重復的起點。如修改 起點位置：p#center {background-position:center center;}（簡化寫法：background-position:center，設定一個關鍵值，則另一個也會取相同的值。），背景圖片就會以段落的中心點為起點。

    第二種情況，使用百分比來設定位置。
    示例：background-position:50% 50%;，再把 background-repeat 設定為 no-repeat，就能實現了圖片在背景區域內居中的效果。第一個值表示水平位置，第二個值表示垂直位置。要是只設定一個值，則將其用來設定水平位置，而垂直位置會被設為 center。