CSS可以用于很多種視覺效果，其中背景圖作為一個重要的元素經常被使用。在CSS中，我們可以利用background-image屬性將背景圖添加到網頁中。循環背景圖則可以讓背景圖無限循環，讓網站具有更加生動、流暢的動態效果。下面我們來看看如何使用CSS實現自動循環背景圖。

/* 設置背景圖和循環方式 */
body {
background-image: url("bg.png");
background-repeat: repeat-x;
background-position: 0 0;
animation: movebackground 20s linear infinite;
}
/* 定義循環動畫規則 */
@keyframes movebackground {
from {background-position: 0 0;}
to {background-position: -500px 0;}
}

在上面的代碼中，我們首先為body元素添加了background-image屬性，將背景圖添加到了網頁中。其中repeat-x表示將背景水平重復，也就是讓背景圖水平滾動。而background-position: 0 0;則表示了背景圖的初始位置，本例中為左上角。

接著，我們使用CSS3動畫技術定義了一個名為“movebackground”的循環動畫規則，并將它應用于了body元素的animation屬性中。這個動畫規則中，from和to分別表示了動畫的起點和終點。在本例中，每20秒動畫就會從初始位置開始，將背景圖往左移動500像素，然后重新開始循環。

通過這段代碼，我們可以達到一個自動循環背景圖的效果，使得網站顯示更加流暢、生動。如果要更改背景圖或滾動速度，只需要更改相應的樣式屬性即可。