實際上，如果沒有發明image標簽，可能就沒有網頁設計師這門職業。
然而對image標簽的濫用可能導致純修飾性的圖像把頁面弄亂。好在CSS使我們能夠在頁面上顯示圖像，而不需要讓圖像成為標記的一部分。實現方法是將圖像作為背景添加到現有的元素中。
背景圖像基礎：
默認情況下，瀏覽器垂直和水平的重復顯示背景圖像，讓圖像平鋪整個頁面。
漸變效果：目前漸變非常時髦，你可能希望在頁面上應用垂直漸變，為此需要創建一個很高但是很窄的漸變圖像，然后將這個圖像應用於頁面的主體，並讓他水平平鋪。
因為這個漸變圖像的高度是固定的，所以如果頁面內容的長度超過了圖像高度，那么漸變會突然停止，解決方法是，再添加一個背景色，因為背景圖像總是出現在背景顏色的上面，所以當圖像結束時，背景顏色就會顯示出來。
小技巧：
- 設置一個空的DIV，然后設置其ID，將DIV的尺寸設置為與圖像相同，圖像作為其背景應用並指定不重復。
- 設置背景圖像的位置（屬性名稱：background-position），例如：background-position：left center;（使用關鍵字）。還可以使用像素或百分比等單位設置圖像位置。但是注意，使用像素設置背景位置，圖像左上角到元素左上角的距離為指定的像素數。但是，使用百分比，並不是對背景圖像的左上角進行定位，而是使用圖像上的一個對應點，所以，如果指定垂直和水平位置都是20%，那么實際上是在將圖像上距離圖像左上角20%的點（圖像上的對應點），定位到距離父元素左上角20%的位置（說白了就是各自找到20%點的位置，然后重合在一起就好了，詳見下面文字解釋）。
建議：最好不要混合使用關鍵字和單位。
1、background-position:0 0;
背景圖片的左上角將與容器元素的左上角對齊。該設置與background-position:left top;或者background-position:0% 0%;設置的效果是一致的。
2、該屬性定位不受對象的補丁屬性( padding )設置影響。
例如，我們給容器元素增加padding值，背景圖片的左上角還是與容器元素的左上角對齊。在此處只是影響到了容器元素的高度和寬度。
為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分數。不同類型的值對於背景圖像的放置稍有差異。
關鍵字：
圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。
根據規范，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對象垂直方向。
如果只出現一個關鍵字，則認為另一個關鍵字默認是 center。
所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：
p {
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
下面是等價的位置關鍵字：
| 單一關鍵字 |
等價的關鍵字 |
| Center |
center center |
| top |
top center 或 center top |
| bottom |
bottom center 或 center bottom |
| right |
right center 或 center right |
| left |
left center 或 center left |
百分數值：
百分數值的表現方式更為復雜。假設你希望用百分數值將圖像在其元素中居中，這很容易：
body {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
KEY: 這會導致圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊（重合）。
例如：如果圖像位於 0% 0%，其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。（也就是top,left,bottom,center…都可以對應0%，100%和50%）
因此，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：
body {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將默認為50%。這一點與關鍵字類似。
background-position 的默認值是 0% 0%，在功能上相當於 top left。這就解釋了背景圖像為什么總是從元素內邊距區的左上角開始平鋪，除非您設置了不同的位置值。
舉例說明：
background:#FFF url(image) no-repeat fixed 50% -30%;
這個時候圖片應該在容器的什么位置呢,算法公式如下：
圖片左頂點距容器左頂點的坐標位置為
x：（容器的寬度-圖片的寬度）x50%
y：（容器的高度-圖片的高度）x（-30%）
得到的結果應用坐標法則，差值如果為負數，百分比為正那么運算結果是負值。如果差值為負數，百分比也為負數，那么運算結果就是正數。總而言之就是這里的運算符合運算法則。把運算的結果帶入坐標法則就能得到圖片的位置。
比如：
容器是width：600px；height：600px；
圖片是width：200px；height：200px；
我們用上面的樣式，可以得到圖片位置為：
x：(600px-200px)*50%
y：(600px-200px)*(-30%)
長度值：
長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。
比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：
body{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。
例如在一個寬高均為300px的容器中，使用：
background-position: 150px 150px;
可以看到背景圖片的左上角頂點（坐標0,0）定位到了齊容器的中心點（坐標150px,150px）。
而把150px替換為50%，使用background-position: 50% 50%;
看到的並不是如下的效果：
而是這樣：
可見，CSS計算出了背景圖片的中心點。這也可以解釋為什么我們在使用：
background-position: 100% 100%;
定位的時候，圖片被放置在容器的右下角，而並沒有跑出容器。（如果使用 background-position: 300px 300px; 的話，背景圖片會被移出容器）
同樣，如果使用：
background-position: 20% 20%;
會將背景圖片的坐標點(20%,20%)定位到容器的坐標點(20%,20%)。
另外可以參考：http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html