HTML怎麼設定網頁背景圖

今天跟大家來說一下HTML怎麼設定網頁背景圖，我們用整個網頁的佈局思維來看，有哪些方法可以設置，每種方法有什麼不同。以及設定背景圖的技巧

網頁單色背景

如果純顏色的網頁背景，只需要對body設定background背景顏色即可

body{background:#FFF} 

設定網頁背景為白色

body{background:#FFF url(bg.gif) repeat-x 0} 

#這樣設置這個圖片為背景圖片靠網頁頂部水平平鋪，背景為白色，這裡注意根據你的圖片路徑設定好引入圖片路徑。

2、水平平鋪類背景圖片

例如2014版網頁，原理和漸變平鋪相同，也是切出一豎條後作為Body背景水平平鋪實現，這樣就全屏網頁背景鋪滿。

程式碼和第1種相同，只是圖片不同而已。對body設定背景圖片水平平鋪。

不規則大圖背景 

常常看到一些專題或形象網頁，背景是一種非常大圖片作為背景，而通常情況下寬屏和窄屏顯示器都能顯示鋪滿的全螢幕背景圖片，就像圖片能自適應寬度大小一樣的。其實這種實現一樣非常簡單，將這張圖片寬度美工設計足夠大，比如市場上最寬顯示屏分辨率寬度為2560像素，那麼要讓這樣的寬屏顯示器瀏覽此網頁也能鋪滿全屏，那麼你的這張背景圖片就必須做成寬度大於或等於2560px寬度的，這樣以來寬屏、窄屏顯示器打開此網頁都能鋪滿全屏，最小化、最大化、改變瀏覽器窗口打開背景圖片都是全屏的居中的看起來就像背景圖片自適應大小一樣。

關鍵：全螢幕自適應背景圖片關鍵是圖片做足夠寬，以最寬解析度顯示器能都鋪滿，小解析度自然就更是鋪滿。同時需要設定這樣背景圖片作為body背景後需要居中。

假如這張背景圖片為：bg.jpg

設定CSS程式碼：

body{background: url(bg.jpg) no-repeat center 0}

程式碼解釋：設定這個圖片為網頁背景，通常不平鋪（no-repeat ），水平居中，靠上顯示

頭部背景圖片和底部背景圖片內容多少高度可增減頭部底部背景不變

這裡為大家介紹兩種常見頭部和底部不同背景圖片技巧設定佈局方法。

這種直接將頭部背景圖片設定為body背景居中靠上顯示，底部版權地方DIV設定寬度100%；同時設定此背景圖片或背景顏色。

body{background: url(bg.jpg) no-repeat center 0} 
#footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}

這樣即可實現頭部底部背景不同，同時不受內容多少高度影響。

而靠底部背景圖片遠遠超出了版權底部盒子高度。

這樣的結構上下不同圖片，不隨中間內容增高減少影響背景佈局，通常對html標籤和body設定背景即可實現。

假如頂部深藍背景圖片為「top.jpg」,底部淺藍背景圖片為「foot.jpg」

DIV CSS設定網頁背景關鍵CSS程式碼：

html{background: url(top.jpg) no-repeat center 0} 
body{background: url(foot.jpg) no-repeat center bottom}

解釋：設定深藍背景圖片為html背景水平居中靠上；設定淺藍背景圖片為body背景圖片水平居中靠下。

以上是總結常見幾種網頁背景佈局設置，靈活設置不管對body、html、div均能設置背景實現自己要的背景效果，如果對div設置為這個網頁背景，那這個DIV高度就不能設定（預設自動）、div寬度設定100%即可。

設定網頁背景圖就是這些，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML裡字體顏色怎麼設定

#HTML裡空格字元怎麼輸入

為什麼要對DIV設定CSS樣式？

以上是HTML怎麼設定網頁背景圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！