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樣式？