Html背景圖片是設計網頁一定會用到的技巧，本文介紹bgcolor屬性語法如何設定背景顏色，再以background將整個頁面填滿背景圖，最後補充CSS滿版圖片封片的樣式效果。

一、Html body text

Html的body標籤便是實際上會在瀏覽器上顯示的網頁內容，在此設定 Body的標籤值「text」，將屬性值設定為某一個特定色彩：「#5DAC81」，如同截圖右側所看到的預覽效果，所有網頁上文字都變成是所設定的綠色。

二、bgcolor背景顏色

接著再設定網頁的背景顏色，同樣是在body標籤內，所使用到的屬性是「bgcolor」，屬性值設定為灰色，也就是「#C0C0C0」，同樣可以在右側看到預覽的效果。

三、Apache伺服器

想在網站首頁放上一張圖片，通常網站圖片由於瀏覽速度和美觀考量，會特別注意圖片尺寸及大小，這裡的相關資訊可以參考一下。另外文章範例是直接在windows電腦架設的Apache伺服器，因此是直接放在電腦的網站資料夾：「本機磁碟(C:)>Apache24>htdocs>html」，如果是實際在網際網路上所架設的網站便是上傳到網站的主目錄。

關於在windows電腦如何架設Apache伺服器網站，可以參考贊贊小屋相關文章。

四、background語法

有了圖片之後，想要在網頁上設定背景圖片，可以在body標籤使用「background」屬性，並且將屬性值設定為上個步驟的「海邊.jpg」圖片，如此在右側已經稍微能看到海邊的模糊景象，但不是很清楚。

五、瀏覽器顯示網頁

實際在瀏覽器上顯示網頁，可以看到應該是圖片的像素解析度相對較大，因此並沒有很完整的在網頁上顯示出來。

六、css滿版樣式

為了改善圖片在網頁上顯示狀況必須使用css工具，因此於html文件的head標籤中設定css樣式：「<style type=”text/css”>」，接著是body頁面的樣式：「background-size: cover」，作用是將圖片背景設定為像雜誌封面一樣完整的顯示。

七、Html背景圖片

設定好了css之後再次瀏覽網頁，終於是相當完美的狀態了，整個海邊的圖片都有顯示出來，再搭配文字後稍微有點設計感的初步網頁雛型。

Html內容與css樣式

從這篇文章簡單範例可以看到，雖然直接的html標籤屬性也可以改變網頁外觀，但如果要進行較為複雜的樣式設定的話，還是必須用到css工具。因此在實務上大部分是將網頁內容和外觀樣式分開，內容部分用html輸入，樣式部分則是純粹使用css樣式表。

每天學習，每天充電：HTML系列文章。

MDN參考資料：The Document Body element。

本篇文章相關的講解影片：