CSS DIV 背景圖片 - CSS 學習筆記

CSS DIV 背景圖片的設定，可以讓一個原本很單純的 DIV 區塊變得很有質感，在 CSS 的 DIV 區塊排版設計時，是一種非常普遍的設計技巧，優點是比單純的設計《CSS DIV 背景顏色》有著更多的變化，不過要使用 DIV 背景圖片，需要設計師花較多的時間準備，除了背景圖片本身的設計與選材之外，DIV 區塊本身也有尺寸上的設計規則唷！以下就準備一個簡單的 DIV 背景圖片設計範例讓各位參考，重點在 css background-image 背景圖片屬性的使用。

CSS DIV 背景圖片範例

呈現效果

這是有背景圖片的 DIV 區塊

範例就是一個簡單的 DIV 區塊，我們只不過在開頭的 DIV 標籤內使用了 style 來宣告一段 CSS 的語法，讓 DIV 區塊成為一個寬 500px（width:500px;）、高 100px（height:100px;）的尺寸，接著就透過 background-image 屬性，將背景圖片墊到 DIV 區塊底部，我們在這個範例所準備的背景圖片尺寸剛好就是 500x100 的大小。使用 DIV 背景圖片的重點就是 DIV 本身的尺寸要與背景圖片的尺寸一樣，這樣就可以整張圖片完美結合，當然偶爾我們會用其他種技巧，例如小張的圖片重複出現也是不錯的效果，有時間再分享技巧。

background-image 屬性中 url 的小括號內，就是放背景圖片網址的地方，最好是將圖片放在網站根目錄，以免出現圖片消失的問題，常常看到許多網站或論壇，用外連的方式插入圖片到 DIV 背景，時間久了之後，圖片都消失了，畢竟用別人的圖檔本來就是有風險的。

如果你不想用背景圖片，只想單純替 DIV 增加背景顏色，請看這篇：CSS DIV 背景顏色。