前面的課程我們已經學習了如何選擇HTML文檔中的元素，也就是選擇器。再接下來內容中，我們將為這些被選擇的屬性應用樣式規則，也就是為元素設置某方面的屬性以及這些屬性可以取哪些值的問題。CSS的核心思想就是首先如何選擇元素（這就是選擇器），然後給這個被選取的元素設置某方面的屬性以及屬性的取值（這就是樣式規則）。
1.背景屬性
在css中背景屬性主要是為元素設置背景顏色或背景圖片。你可以將背景顏色或背景圖片應用於任何元素。比如，一段文字或整個網頁。在使用時你必須首先要有一個HTML文檔（網頁源文件），就像下面的這樣。
<body>
<h1>這是文檔標題<h1>
<p>這是第一段文字<p>
<p>這是<em>第一段</em>文字</p>
</body>
2.通過選擇器和背景樣式規則來設置HTML的背景
(1)背景色：可以使用 background-color 屬性為元素設置背景色。這個屬性接受任何合法的顏色值。這條規則把元素的背景設置為綠色：p {background-color: green;}。可以為所有元素設置背景色，這包括 body 一直到 em 和 a 等行內元素。
(2)背景圖像：要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：body {background-image: url(tree.jpg);}，這句話的意思就是為整個網頁應用了一幅背景圖像，圖像文件時tree.jpg，這個圖像位置和html文檔在同一個文件夾內(相對路徑)。大多數背景都應用到 body 元素，不過並不僅限於此。下面例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：p {background-image: url(flower.jpg);}
更多web前端開發技術請參考下面的內容。
(3)背景重複：如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重複，no-repeat 則不允許圖像在任何方向上平鋪。默認的，背景圖像將從一個元素的左上角開始。請看下面的例子：
body
{
background-image: url(tree.jpg); //為頁面應用背景圖像
background-repeat: repeat-y; //背景圖像平鋪方式是沿垂直方向平鋪
}
(4)背景定位：可以利用 background-position 屬性改變圖像在背景中的位置。下面的例子在 p 元素中將一個背景圖像居中放置：
P { background-image:url(flower.jpg);//為段落應用背景圖像。
background-repeat:no-repeat; //背景圖像平鋪方式是不重複平鋪。
background-position:center; //背景圖像在段落元素中水平和垂直方向都居中顯示。
}
為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。
關鍵字：圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。根據規範，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向。如果只出現一個關鍵字，則認為另一個關鍵字是 center。
長度值：長度值解釋的是元素內邊距區左上角的偏移。偏一點是圖像的左上角。比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上。
(5)背景固定：如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的（fixed），因此不會受到滾動的影響。background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。
p { background-image:url(tree.jpg); background-repeat:no-repeat; background-attachment:fixed; }