CSS background-image 背景圖片

CSS background-image 用來設定背景圖片，是 CSS background 的屬性之一，除了可以定義整個網頁的背景圖片，也可以用來設定單一網頁元素，如 DIV 區塊、span 區域或 HTML table 表格的背景圖片，background-image 是標準的 CSS 網頁元素背景圖案設計方法，通常可以與 background-position、background-repeat 或 background-color 混搭設計，幾乎所有的主流瀏覽器都支援 background-image 屬性。

CSS background-image 基本語法

background-image: url( ' 圖片網址 ' );

範例中的 url 小括號內有三種可以使用的參數，分別為 none（預設值，不顯示圖片）、inherit（繼承自父層）以及圖片網址這三種，其中第一個參數 none 除非在特殊情況下才有必要，否則寫出來的意義其實並不大，inherit 則是部分版本的 IE 瀏覽器不支援，所以最有意義的寫法還是給出要顯示的圖片網址，以下有兩個範例分別設定整個網頁的背景圖片以及 DIV 區塊的背景圖片。

CSS background-image 範例一、網頁背景圖片

body {
　background-image:url( ' 要顯示的圖片網址 ' );
　background-repeat:no-repeat;
　background-color: 背景顏色;
}

直接在 body 設 background-image 是許多設計師常用的手法，優點是管理整個網頁背景較為便利，加入「background-repeat:no-repeat」的效果，意思是背景圖片不要重覆顯示，最後再加上 background-color 來做一個背景基本色，若遇到圖片未正常顯示的情況，至少還有背景顏色可以顯示，這也是設計網頁背景時的一種保險技巧，背景顏色可由《色碼表》來挑選。

CSS background-image 範例二、DIV 區塊背景圖片

以上範例呈現結果如

此範例分別對兩個不同的 DIV 區塊設計背景圖片，為了能夠清楚的呈現範例的範圍，所以替 DIV 區塊加上了灰色邊框（border），由第一個 DIV 區塊可以看到 background-image 預設的背景圖片效果，會自動填滿整個區域，第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態，範例的 no-repeat 是讓圖片僅顯示一次，若要讓圖片朝垂直或水平方向重覆出現，請參閱：background-repeat。

延伸閱讀