如何替網頁增加背景圖片？答案是 CSS background-image

網頁背景圖片在以前普遍都是採用HTML 的 background 屬性來增加，可以用在網頁表格、網頁表單、整個網頁的 body tag 內，隨著 CSS 的普及，網頁背景圖片的使用技術漸漸改為 CSS 技術，那在 CSS 的規則裡是用什麼屬性來調整網頁背景圖片呢？

答案就是 background-image 屬性，看起來與傳統 HTML 的 background 是不是很類似呢？因為都是調整背景有關的嘛，既然如此，CSS 的背景圖片設計屬性也用 background 開頭，並加上 – 符號以及 image 來標示與圖片有關，瀏覽器看到這個 background-image 就知道是要設定背景圖片，舉個簡單的例子來研究。

<div style="width:200px;height:200px;background-image:url(背景圖片網址)">
這是一個有背景圖片的 DIV 區塊
</div>

我們先替這個新的 DIV 區塊設計了寬度與高度都是 200px，所以看起來會是一個正方形，然後才使用 background-image 屬性增加一張背景圖片，我在這裡要稍微提醒一下，以此範例來說，背景圖片最好是選用一樣尺寸，也就是 200x200 的圖片，這樣效果才會漂亮。  那也許有人會問，如果尺寸不一樣會怎麼樣？答案是不會怎樣，頂多就只是圖片跑掉或變得不太好看而已，這樣的結果 OK 嗎？相信各位專業的網頁設計師心理會有個底。

webtech 這個網站上有一篇教學：CSS background-image 背景圖片

那 CSS 的 background-image 可以用在哪些地方呢？可以利用的地方可多了，無論是網站本身的 body tag、DIV 區塊、span 區域、按鈕 button ... 都可以使用，應用範圍很廣泛。