CSS background 背景屬性 - 網頁設計教學站

CSS background 背景屬性用來設定網頁本身或網頁元素的背景，包含背景顏色（background-color）與背景圖片（background-image）的不同效果，在早年的 HTML 網頁設計中，背景顏色是用 bgcolor 設定，而背景圖片是用 background 加上圖片網址，不過 HTML 的設計方式稍嫌麻煩，因為當網頁中有許多區塊用相同的背景顏色或背景圖片時，CSS 才能夠透過 id 或 class 做整合管理，所以現在絕大多數的網頁設計師都開始採用 css background 的屬性設計網頁背景，而且 background 屬性也獲得各大流覽器支援，幾乎已經成為目前主流的設計方式，以下就是 css background 家族常用的屬性。

各種屬性都有標準的用法，而且寫起來規則都很簡單，本篇就用幾個範例來簡單呈現這些屬性的效果。

範例一、background-color

<div style="background-color:#FFECC9;">背景顏色為 #FFECC9</div>

呈現效果

背景顏色為 #FFECC9

background-color 是設定背景顏色的標準用法，也是網頁設計師在需要營造網頁風格又不想花太多時間做背景圖片時的快速解決方案，範例中的 #FFECC9 是十六進位的色碼，你也可以隨意更換成其他種不同的顏色，Wibibi 提供的《色碼表》有數百種色碼可以挑選。另外，如果比較有時間，或者是對於背景精緻度要求比較高的時候，則會使用到背景圖片，繼續看下去。

範例二、background-image

<div style="background-image:url(背景圖片);width:380px;height:120px;">
這個 DIV 區塊有設定背景圖片
</div>

呈現效果

這個 DIV 區塊有設定背景圖片

範例二中準備了一個寬度為 300px、高度為 120px 的 DIV 區塊，透過 background-image 屬性替這個 DIV 區塊加上背景圖片，有了背景圖片的 DIV 區塊一樣可以放文字，不會受到圖片的推擠或影響，畢竟背景圖片就是以背景的姿態呈現，這也代表的背景圖片最好不要使用太過搶眼的圖片，以免喧賓奪主的情況發生。

各位可以注意到這個 DIV 區塊中的文字不但水平置中，而且還垂直置中，這又是怎麼做到的呢？直接把範例的程式碼試著自己練習看看，可能會發現文字沒有這種置中效果，那是正常的，因為還要多加幾個語法，範例沒有把置中效果的語法寫出來，避免混淆到範例的重點，雖然這個效果與 background-image 沒有關係，不過應該蠻多人會有興趣的，這兩篇有詳細的說明，有空可以研究看看。

以上兩個範例讓我們有了背景圖片與背景顏色的基本概念，然而偏偏有的時候背景圖片不夠大，特別是在一張小圖片卻要做成整個網頁的背景圖片，也就是要補滿整個網頁背景，該怎麼做呢？範例三是個不錯的開頭。

範例三、background-image 結合 background-repeat 讓背景圖片重覆顯示

呈現效果

我們在範例三準備了一個方形的圖片，有左置右做了漸層效果，目的是為了讓這個背景圖片重覆出現的效果能夠明顯一點，看到程式碼，其實也很簡單，除了原本會用到的 background-image 屬性之外，還加上了 background-repeat 屬性，讓方形的背景圖片能夠在 x 軸方向重覆的出現，自己練習的時候，可以把 DIV 區塊的寬度（width）加大，會發現背景圖片持續的重覆出現。background-repeat 屬性不只可以讓背景圖片在 x 軸方向重覆出現，y 軸方向也可以呢！這些背景屬性值得花些時間研究。

有這些 background 背景屬性，幾乎可以解決所有網頁設計時的背景設計需求。