在前端開發過程中，為了頁面的美觀，往往都會為html頁面加入背景圖片。那麼如何利用css設定html中用圖片做背景呢？這篇文章就跟大家介紹css怎樣設定背景圖片，需要的朋友可以參考和學習一下，希望對你有幫助。
一、background概述
CSS 可以新增背景顏色和背景圖片，以及來進行圖片設定。
css background屬性就是專門設定背景的屬性，可以設定背景色，也可以設定背景圖片。
二、屬性
1. background-color
（1）定義與用法： background-color 屬性設定元素的背景顏色
（2）元素背景的範圍
background-color 屬性為元素設定一種純色。這種顏色會填滿元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。
（3）transparent 值
儘管在大多數情況下，沒有必要使用transparent。不過如果您不希望某元素擁有背景色，同時又不希望使用者對瀏覽器的顏色設定影響到您的設計，那麼設定transparent 值還是有必要的。
使用background-color 為元素設定背景顏色：
<!DOCTYPEhtml><html><head><title>CSS背景</title><style>#bg{color:white;background-color:blue;margin:20px;/*設定外邊距為20px*/padding: 20px;/*設定內邊距為20px*/border:10pxdottedyellow;/*設定一個寬10px的黃色虛線邊框*/}</style></head><body><pid=bg>background-color屬性< /p></body></html>展示結果如下：
透過運行結果可以看出background-color 屬性能夠為元素設定純色的背景，這種顏色會填滿元素的內容、內邊距以及邊框區域（也可以理解為邊框及以內的所有區域），對於元素邊框以外的區域（外邊距）則沒有影響。
2. background-image設定背景圖
background-image:url(imgs/main_bg.jpg),
如果屬性在css檔案中設置，而圖片不在css資料夾中，那麼路徑前面加上返回上一層資料夾…/
（1）background-image 屬性為元素設定背景圖像。
（2）元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。
（3）預設地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。
（4）url('URL')：指向影像的路徑。
提示：請設定一種可用的背景顏色，這樣的話，如果背景圖像不可用，頁面也可獲得良好的視覺效果。
3. background-repeat背景圖重複
預設情況下，背景圖會鋪滿整個頁面，背景圖大小不夠鋪滿整個頁面時，背景圖會在橫座標和縱座標中重複；
4. background-size設定背景圖的尺寸
5. background-position設定背景圖位置
預設值： left、bottom、right、top、center（置中）
註：也可以用數值或百分比如background-position：10px 10px 表示橫、縱座標離左邊、上邊邊框的距離；
6. background-attachment設定為是否固定
7.background-origin
background-origin 是CSS3 中新增的屬性。在使用background-position 屬性來設定背景影像的位置時，預設是以元素左上角的位置來計算的。您也可以使用background-origin 屬性來設定background-position 屬性相對哪個位置來定位背景影像，background-origin 屬性的可選值如下：
8. background-clip
background-clip 是CSS3 中新增的屬性，透過它可以設定背景影像的顯示區域。 background-clip 屬性的可選值如下：
注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不收影響。
9. background
background 是背景屬性的簡寫形式，透過它不僅可以為元素設定某個背景屬性，還可以同時設定多個或所有的背景屬性。設定多個背景屬性時並沒有固定的順序，但建議使用以下順序進行設定：
background-color||background-image||background-position[/background-size]?||background-repeat||background-attachment||background-origin||background-clip
注意：背景圖和img屬性的差別：
（1）img元素屬於HTML的概念，背景圖屬於css的概念
（2）圖片屬於網頁內容時，必須使用img元素
（3）當圖片僅用於美化頁面時，必須使用背景圖