設定網頁背景圖片

網頁背景圖片雖然只是個壓在下層的襯底，卻是影響視覺效果的重要角色，如果背景圖選得不好，倒不如改用單純的背景底色來得乾淨俐落呢。

關於設定網頁背景色彩或圖片的方法，請參考 4-4 節的說明。在此來看看加入背景圖片的注意事項及相關設定。

設定網頁背景圖片

背景圖片的注意事項

設定不會捲動的背景圖片

創意背景圖片

注意螢幕解析度

背景圖片的注意事項

由於不搭軋的背景圖片可是會讓網頁大大地扣分，所以下面提供一些注意事項供參考。

圖片顏色不要太過強烈或鮮艷：

不管背景圖片有多漂亮，它的作用都是用來襯托網頁內容，所以顏色太鮮艷或構圖太複雜的圖片，反而使人看不清網頁上的文字；

若非用不可，建議先用影像處理軟體將圖片打淡，這樣看起來會比較舒服。

背景圖片的注意事項

圖片與文字的搭配：

深色背景圖要搭配淺亮色的文字

淺色背景圖就要搭配深暗色的文字

這樣文字閱讀起來才會清晰

背景圖片的注意事項

用小圖片拼接時要注意接縫問題：網頁背景圖是以貼磁磚的方式重複排列而成，所以只要準備一張小圖片，就會自動填滿整個網頁，不管視窗如何捲動都一樣。

這樣的好處是圖片的檔案小，下載時間也相對縮短，因此不建議各位使用太大的圖片做為背景。

不過大部份的圖片在拼接時會有明顯的接縫，這時就要多花點功夫，去蒐集一些無接縫的背景底圖來使用，或者用影像處理軟體自己製作！

背景圖片的注意事項

背景圖片的注意事項

用大圖片填滿背景時要注意視窗捲動問題：有的人會用一大張圖片來做為網頁的背景，比較容易呈現出想要的主題。其實不管是多大或多小的圖片，瀏覽器仍會將它重複填滿視窗，只是大圖片剛好塞滿一整個視窗範圍，所以看起來好像沒有重複的樣子。

不過用大圖片有兩個壞處

第一個是檔案可能會太大

第二個是萬一網頁內容超過背景圖片大小，那麼瀏覽者向下捲動時，背景圖片就會出現重複拼接的穿幫情況了。

背景圖片的注意事項

設定不會捲動的背景圖片

擔心大張的背景圖片在捲動畫面時會穿幫，其實可以利用 CSS 語法，使背景不會跟著畫面而捲動。

請開啟練習檔 ex05-08.html在 CSS 樣式面板中按下增加屬性將 backgroundattachment 項目設定為fixed 即可

設定不會捲動的背景圖片

設定不會捲動的背景圖片

設定不會捲動的背景圖片

接著請用 IE 瀏覽器來進行預覽，試著向下捲動畫面，會發現背景圖片不會跟著移動！

創意背景圖片

可以將圖片製作成長條的形狀，並且利用背景圖片會一小塊一小塊重複拼貼的特色，創造出許多有趣的背景圖片。

以下舉出幾個例子，也可以試著用影像處理軟體做出相同的效果：

創意背景圖片

創意背景圖片

注意螢幕解析度

在製作這種長條式的背景底圖時，請特別注意螢幕解析度的問題

由於目前使用1024 ×768 解析度的人越來越多

所以圖片的水平長度至少要有 1024 pixels如果長度不夠，則瀏覽器會將圖片橫向並排

注意螢幕解析度

注意螢幕解析度

設定網頁背景圖片設定網頁背景圖片背景圖片的注意事項背景圖片的注意事項背景圖片的注意事項背景圖片的注意事項背景圖片的注意事項背景圖片的注意事項設定不會捲動的背景圖片設定不會捲動的背景圖片設定不會捲動的背景圖片設定不會捲動的背景圖片創意背景圖片創意背景圖片創意背景圖片注意螢幕解析度注意螢幕解析度注意螢幕解析度