CSS background-image 背景圖片 - CSS 學習筆記

CSS background-image 背景圖片屬性是用來替網頁本身或是網頁元素增加背影圖片的效果，用起來與 HTML 的 background 其實差不多，不過畢竟是 css 的語法，所以可以跟全站的 css 做整合，例如外嵌 css 檔案就很便利，傳統的 HTML background 無法做到這樣的管理。

CSS background-image 是 css background 背景屬性的一種，常常與 background-position（背景圖片位置）、background-repeat（背景圖片重覆顯示）這兩種屬性搭配設計，而常使用到 background-image 的的元素是網頁本身的 body 標籤、DIV 區塊、button 按鈕、Table 表格 ... 等，基本上 background-image 的技巧簡單而且應用廣泛。

css background-image 基本語法

background-image:url( your image url );

只需要在想增加背景圖片的網頁元素中，使用 background-image 屬性，即可增加背景圖片，語法中的 url 小括號內就是背景圖片的網址，可以是網頁本身同一台伺服器上的圖片，也可以是外部圖片，重點在於圖片網址可以正確顯示，而且不可以盜用別人的圖。

css background-image 範例一、設定整個網頁的背景圖片

這是一個幫網頁背景增加背景圖片的簡單範例，還有很多種其他不同的寫法，不過我們還是把重點放在這個範例上吧！

範例中比較重要的是 body 的元素樣式中，我們使用了 background-image 與 background-color 兩種屬性，這樣的設計方式比較安全，怎麼說呢？當背景圖片沒有正確顯示的時候（例如圖床掛點、圖檔遺失 ... 各種狀況），至少還有背景圖片可以檔一下，我們在範例中的 background-color 使用 #eeeeee 代表的是淺灰色，各位設計師當然可以自己修改成其他種顏色，以下這篇是背景顏色的詳細用法，提供給各位參考。

css background-color 背景顏色

誠如第一段所說，css background-image 不只是應用在整個網頁背景圖片，網頁中的許多元素都可以使用，範例二是替 DIV 區塊增加背景圖片的實際應用，也是很常用到技巧。

css background-image 範例二、設定 DIV 區塊的背景圖片

呈現結果

DIV 區塊要加上背景圖片非常簡單，但必須同時設定 DIV 的寬度與高度，否則背景圖片很容易無法與整個 DIV 配合好，以這個範例結果來說，我們準備了一個寬度為 300px、高度為 80px 的背景圖片，所以 DIV 的 width 要寫成『width:300px;』，height 則寫成『height:80px;』這樣，關於替 DIV 增加背景圖片，可以參閱這篇：CSS DIV 背景圖片。

延伸閱讀