我們使用CSS Background樣式屬性，可以設置網頁背景單一顏色、網頁背景為圖片、網頁背景圖片居中于網頁、網頁背景圖片網頁固定位置、網頁背景圖片中網頁中重復平鋪等css背景樣式介紹與案例講解。

擴展閱讀：CSS背景Background基礎：http://www.divcss5.com/rumen/r125.shtml

背景顏色背景圖片目錄

CSS背景background圖片

CSS背景顏色

背景為顏色與為圖片總結

一、CSS背景background圖片 ? - ? TOP

1、背景圖片語法

background-image:url() 引入背景圖片

background-repeat:no-repeat 設置背景圖片是否重復平鋪

background-position:left top 設置圖片的css背景定位，left代表靠左，top代表靠上

簡寫背景圖片語法：

background:url(圖片地址) no-repeat left top

2、背景圖片設置

Body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }

這里設置了圖片“http://www.divcss5.com/img201301/divcss5-logo-2013.gif”作為網頁背景不重復并靠上靠左顯示。，

3、CSS背景圖居中

橫向居中：

background:url(圖片地址) no-repeat center top

縱向居中：

background:url(圖片地址) no-repeat left 50%

這里50%是隨意設置考上為50%距離，細節具體上下垂直居中需要再通過百分比均衡設置。

4、背景圖片一般案例

Body設置網頁背景css代碼

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0}

CSS圖片背景案例截圖

不重復也不平鋪圖片背景截圖

5、div css背景圖片居中

Css背景圖片居中代碼：

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center 0}

這里我們用了“center ”居中屬性，更多詳情可進入css 背景了解基礎

居中截圖

背景圖片居中于網頁截圖

6、背景圖片橫向平鋪

CSS背景X橫向平鋪代碼：

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-x}

案例截圖：

Y軸橫向平鋪圖片背景截圖

7、背景圖片縱向平鋪

CSS背景Y縱向平鋪代碼：

body{

background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y

}

平鋪重復圖片背景效果截圖：

縱向Y軸方向垂直平鋪圖片背景截圖

8、全網頁背景圖片重復平鋪

圖片背景全屏網頁重復平鋪關鍵代碼：

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}

截圖：

圖片作為背景全屏平鋪顯示截圖

說明：這里沒有設置是否重復，是否居左居右，只設置背景引入圖片即可簡便地實現圖片自然全屏平鋪

二、CSS背景顏色 ? - ? TOP

1、background背景顏色語法

background:#FFF

.divcss5{background:#FFF}

設置了divcss5對象背景為白色

2、背景顏色案例

假如我們設置網頁背景全部為白色，文字顏色為白色

1)、對應背景顏色CSS代碼與HTML源代碼：

html>

無標題文檔

body{background:#000;?color:#FFF}

DIVCSS5?背景為黑色；文字顏色為白色

2)、背景顏色與文字顏色案例截圖

CSS設置背景顏色與CSS字體顏色

如果想了解CSS背景顏色與CSS圖片背景同時設置background基礎進入：http://www.divcss5.com/rumen/r125.shtml

三、背景為顏色與為圖片總結 ? - ? TOP

我們使用css background設置圖片為網頁背景，圖片為網頁背景各種樣式，包括了是否背景圖片居中，是否背景圖片重復平鋪顯示、是否固定背景圖片位置等背景樣式，以上知識點與案例點希望大家自己復制以上代碼實踐觀察即可掌握。

總結

以上是生活随笔為你收集整理的html背景图片横屏,CSS背景颜色 背景图片 居中 重复 固定样式background经验篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。