預設情況下，背景影象從元素的 padding 區域的左上角開始顯示。然而，有時候卻希望背景影象從邊框的左上角、或內容區的左上角開始顯示。

這時，就可以通過 background-origin屬性來設定背景影象的起始顯示位置，可選值有 border-box | padding-box | content-box，預設值為 padding-box。

border-box 表示背景影象從 border 區域的左上角開始顯示，當為邊框設定透明度後，背景影象和邊框相疊加，透過邊框可以看見背景影象。padding-box 表示背景影象從 padding區域的左上角開始顯示。content-box 表示背景影象從 content區域的左上角開始顯示。當內邊距為0時，padding-box 與 content-box 的效果相同。

這裡對每個取值定義了一個類，然後分別應用到一個容器，來看看 background-origin屬性在不同取值下的表現。程式碼如下：

1. div  {
2. width:120px;
3. height:90px;
4. padding:20px;
5. border:10px dashed #888;
6. background-color: yellow;
7. background-repeat:no-repeat;
8. background-image: url(img/bg.gif);
9. }
10. .border-box {
11. background-origin: border-box;
12. }
13. .padding-
    box {
14. background-origin: padding-box;
15. }
16. .content-box {
17. background-origin: content-box;
18. }

1. <divclass="border-box"></div>
2. <divclass="padding-box"></div>
3. <divclass="content-box"></div>

這裡把邊框設定為很粗的虛線，並把背景色設定為黃色，以便能夠清楚看到背景色或背景影象延伸到邊框下的情況。上述程式碼的執行結果如圖 4‑34 所示：

從上圖可以看到，background-origin 屬性只能控制背景影象的表現，不能控制背景色的表現，背景色始終是從元素的邊框開始顯示。