CSS DIV 背景圖片

CSS DIV 背景圖片的設計需要用到 background-image 屬性，這是一個用來設計網頁元素背景圖片的標準語法，用途是將預先準備好的圖片，插入到網頁本身或網頁元素之中，使用上較 background-color 單純的背景顏色稍微複雜，卻可以創造出更豐富、更精緻的網頁 DIV 背景圖片效果，如果網頁的風格需要 DIV 背景圖片的襯托來提升整體視覺感受，可以閱讀這篇所提供的 CSS DIV 背景圖片範例。

為了避免誤會，這裡先說明 background-image 這個屬性，只能用來插入背景圖片，並非設計背景圖片的功能，要設計圖片，必須用繪圖軟體如 Photoshop、GIMP、illustrator、小畫家 ... 這類的繪圖軟體來設計。回到正題繼續看如何用 background-image 插入 DIV 背景圖片。

CSS 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 背景顏色。

延伸閱讀