我們在進行網站的設計製作過程中，使用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方式的話，只需要將漸變背景按需要高度設計就行不再需要使用超高的圖片來平鋪了。