我們在進行網站的設計製作過程中，使用css來針對背景圖片進行設置，其實就與傳統的做法一樣十分簡單方便。不過，相對於傳統的一些操作方式，css可以提供更多的可控選項，我們先了解一下一引起最基本的設置圖片的方法。
css代碼如下：
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/bg.GIF);
}
xhtml代碼如下：
<div id="content">
</div>
在網頁中id爲content的元素，都被我們設置了使用images文件夾下的bg.GIF作爲背景。這與傳統表格式佈局中的設置並無差別。不過在默認狀態下，背景同樣以平鋪的方式出現在元素之中。然而使用css來控制背景當然不可能如此簡單，實際上css爲我們提供了更多用於控制背景的屬性，包含可以控制元素是否需要平鋪。改進後的代碼：
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/bg.GIF);
background-repeat: repeat-x;
}
加了background-repeat:repeat-x;之後,背景現在只在X軸即橫向進行了平鋪操作，縱向並沒有進行平鋪。這便是css對於背景細節的控制之一。background-repeat是針對背景平鋪的屬性設置，可選的值包含：
複製代碼代碼如下:
repeat 即默認方式，完全平鋪背景;
no-repeat 在X及Y軸方向均不平鋪;
repeat-x 橫向平鋪背景;
repeat-y 縱向平鋪背景。
另外，需要注意的是平鋪選項是在網頁設計中能夠經常使用到的一個選項，例如網頁中常用的漸變式背景。採用傳統方式製作漸變式背景，往往需要寬度爲1px的背景進行平鋪，但爲了使縱向不再進行平鋪，往往高度設爲高於1000px。採用repeat-x方式的話，只需要將漸變背景按需要高度設計就行不再需要使用超高的圖片來平鋪了。