在CSS中，通過 body 元素 background-image 屬性來定義整個窗體的背景影象，通過其他元素自身的 background-image 屬性來定義元素自己的背景影象。

定義背景影象之後，預設情況下，當窗體的內容滾動時，窗體的背景影象會跟著一起移動，其他元素的背景影象則不同，始終相對於元素固定不動，不會跟著元素內容一起移動。

CSS提供了 background-attachment屬性，可以靈活控制背景影象是跟著元素的內容一起移動，還是固定不動。其可選值有 scroll | fixed | local，預設值為 scroll。

其中，fixed 只對 body 元素有效，local 只對 body 之外的其他元素有效，scroll 則對任何元素都有效。不同取值的含義見表表 4‑6：

先來看看一般元素的效果。假設把一個容器 div 的 background-attachment 屬性值設定為 scroll，因為要檢視容器滾動時的效果，要把容器的 overflow 屬性設定為 scroll，還要限制容器的尺寸，以便在內容溢位時能產生滾動條。程式碼如下：

1. div {
2. width:160px;
3. height:160px;
4. overflow: scroll;
5. background-attachment: scroll;
6. background-repeat:no-repeat;
7. background-image:url(img/bg.gif);
8. }

<div>定義背景影象之後， …，不會隨著元素自身滾動條的滾動而移動。</div>

上述程式碼的執行結果如圖 4‑30 所示：

從上圖可以看出，元素內容的滾動條已經向下滾動到達元素的底部，而背景影象並沒有隨著元素內容的滾動而移動。

現在，把 div 的 background- attachment屬性值設定為 local。執行結果如圖 4‑31 所示：

從上圖可以看出，元素內容的滾動時，背景影象跟著內容一起移動。另外，對於一般元素，無論其 background-attachment屬性是什麼值，如果該元素的祖先元素或窗體發生滾動，則該元素連同其背景影象，會作為一個整體，跟著一起移動。

先來看看一般 body 元素的效果。如果把 body 元素的 background- attachment 屬性值設定為 scroll，當窗體的內容滾動時，窗體的背景影象會跟著一起移動。這個比較簡單，就不再舉例。

現在看看 body 的固定背景，假如為 body 元素定義了背景影象，背景影象在整個窗體的中央，位置固定，且不重複。CSS程式碼如下：

1. body {
2. background-position:50%50%;
3. background-repeat:no-repeat;
4. background-attachment:fixed;
5. background-image: url(img/bg.gif);
6. }

上述程式碼的執行效果如圖 4‑32 所示：

從上圖可以看出，整個窗體的滾動條已經向下滾動，到達頁面的中間，而窗體的背景影象始終靜止不動，保持在整個窗體的中央。