為了避免誤會，這裡先說明 background-image 這個屬性，只能用來插入背景圖片，並非設計背景圖片的功能，要設計圖片，必須用繪圖軟體如 Photoshop、GIMP、illustrator、小畫家 ... 這類的繪圖軟體來設計。回到正題繼續看如何用 background-image 插入 DIV 背景圖片。
CSS DIV 背景圖片範例
<div style="background-image:url(背景圖片);width:600px;height:400px;border:2px #ccc solid;"></div>
範例呈現效果第一段所提到的關於 background-image 設計 DIV 背景圖片會比 background-color 設計背景顏色稍微複雜一點的地方，就在要在 DIV 使用背景圖片，通常會需要設計 DIV 的寬度與高度，像範例中這樣替 DIV 區塊加入寬度（width:600px;）與高度（height:400px;）的屬性，目的是讓背景圖片的尺寸能與 DIV 本身的尺寸相吻合，關於 DIV 尺寸的設計規則，請參閱：CSS DIV 寬度與高度的設定。範例中的 border 僅是用來設計邊框用的，與 DIV 背景圖片無關，詳細說明：CSS border 邊框。
CSS DIV 背景圖片只有這麼簡單嗎？當然不只，CSS 考量到不同的網頁風格會有不同的背景圖片呈現需求，例如背景圖片是否要跟著滑鼠的上下滑動而移動，或者是背景圖片要固定在哪個位置，左上角還是右下角？這幾篇可以幫您解答這些問題。
覺得 DIV 背景圖片太麻煩？其實直接使用背景顏色也可以設計得很美，看這篇：CSS DIV 背景顏色。
延伸閱讀