CSS DIV 背景圖片

CSS DIV 背景圖片的設計需要用到 background-image 屬性,這是一個用來設計網頁元素背景圖片的標準語法,用途是將預先準備好的圖片,插入到網頁本身或網頁元素之中,使用上較 background-color 單純的背景顏色稍微複雜,卻可以創造出更豐富、更精緻的網頁 DIV 背景圖片效果,如果網頁的風格需要 DIV 背景圖片的襯托來提升整體視覺感受,可以閱讀這篇所提供的 CSS DIV 背景圖片範例。

為了避免誤會,這裡先說明 background-image 這個屬性,只能用來插入背景圖片,並非設計背景圖片的功能,要設計圖片,必須用繪圖軟體如 Photoshop、GIMP、illustrator、小畫家 ... 這類的繪圖軟體來設計。回到正題繼續看如何用 background-image 插入 DIV 背景圖片。

CSS DIV 背景圖片範例
<div style="background-image:url(背景圖片);width:600px;height:400px;border:2px #ccc solid;"></div>
範例呈現效果
第一段所提到的關於 background-image 設計 DIV 背景圖片會比 background-color 設計背景顏色稍微複雜一點的地方,就在要在 DIV 使用背景圖片,通常會需要設計 DIV 的寬度與高度,像範例中這樣替 DIV 區塊加入寬度(width:600px;)與高度(height:400px;)的屬性,目的是讓背景圖片的尺寸能與 DIV 本身的尺寸相吻合,關於 DIV 尺寸的設計規則,請參閱:CSS DIV 寬度與高度的設定

範例中的 border 僅是用來設計邊框用的,與 DIV 背景圖片無關,詳細說明:CSS border 邊框

CSS DIV 背景圖片只有這麼簡單嗎?當然不只,CSS 考量到不同的網頁風格會有不同的背景圖片呈現需求,例如背景圖片是否要跟著滑鼠的上下滑動而移動,或者是背景圖片要固定在哪個位置,左上角還是右下角?這幾篇可以幫您解答這些問題。
覺得 DIV 背景圖片太麻煩?其實直接使用背景顏色也可以設計得很美,看這篇:CSS DIV 背景顏色

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C