CSS background-image 背景圖片 - 網頁設計教學站

CSS background-image 背景圖片設計語法可以幫網頁設計師提升網頁的精緻度，因為單純的背景顏色可能太過單調，這時候就可以自己準備好比較有設計感的圖片，當成網頁背景圖片，來襯托整個網頁內容。當然 background-image 的功用不僅止如此而已，還可以替許多網頁內的不同元素增加背景圖片唷！像是 DIV 區塊、textarea 文字輸入欄位都常用到 background-image 的特效，在這篇 css 背景圖片設計介紹內，我們將用 background-image 替這些元素增加背景顏色，先來看基本語法規則吧！

CSS background-image 語法規則

background-image:url( 將你的圖片網址放在這裡 );

語法非常的簡單，就是把準備好的背景圖片網址（url）放到小括號內即可，不過不要亂放圖片，例如盜用別人的圖片就是絕對不可以的做法，另外，要確定圖片是否可以正常顯示或是圖片所在主機是否有提供外連，如果能將圖片放在自己的網頁伺服器上最好。

使用背景圖片還有一個重點要注意，就是圖片的尺寸，與搭配的＂容器＂要符合，整體才會漂亮，例如放在 300x300 的 DIV 區塊內，圖片尺寸就要設計成 300x300 的大小，這樣才能剛好滿版。當然，如果打算使用 background-position、background-repeat 這些語法來調整背景圖片呈現的位置，則圖片尺寸大小就不一定受限於容器的大小，接著來看兩個範例。

CSS background-image 範例一、替 DIV 區塊增加背景圖片

<div style="background-image:url(背景圖片);width:380px;height:120px;">
這個 DIV 區塊使用 300x120 的背景圖片
</div>

呈現效果

這個 DIV 區塊使用 300x120 的背景圖片

範例一在 DIV 區塊的開頭標籤內使用 css 的 style 宣告用 background-image 加入背景圖片，而且 DIV 區塊的大小寬度為 380px、高度為 120px，讓背景圖片與 DIV 區塊大小剛剛好吻合，背景圖片的漸層效果就顯得非常的漂亮。

CSS background-image 範例二、替 textarea 文字輸入欄位增加背景圖片

呈現效果

範例二的 css 語法與範例一是完全一樣的，只是套用在不同的網頁元素中，像範例二這樣就可以很輕易的幫 textarea 文字輸入欄位做一點美化，而且比單純的使用 background-color 還有質感些。想一想還有哪些網頁元素可以使用 background-image 來美化吧！

延伸閱讀