CSS background-repeat 重覆背景圖片

CSS background-repeat 用來設定背景圖片是否重覆顯示以及重覆顯示的方向，通常與 background-image 搭配使用，若設計的網頁背景圖片是比較單純的色塊，採用 background-repeat 將小圖片自動佈滿整個網頁背景，是相當普遍的節省頻寬設計方式，當背景圖片是一張具有顯示範圍的大圖片，不希望出現圖片接圖片產生的視覺落差，也可以用 background-repeat 將圖片限制只顯示一次。

CSS background-repeat 基本語法

background-repeat: 方向與重覆參數;

語法中的方向與重覆參數用來控制背景圖片是否要重覆以及朝哪個方向重覆，預設值為水平方向與垂直方向連續顯示，網頁設計的基本方位，水平方向為 X 軸，垂直方向為 Y 軸，我們可以透過幾的不同的參數來設定背景圖片的顯示模式。

CSS background-repeat 方向與重覆參數

參數值	定義
repeat	預設重覆方式，背景圖片依 x 軸與 y 軸重覆呈現。
repeat-x	背景圖片沿 x 軸重覆呈現。
repeat-y	背景圖片沿 y 軸重覆呈現。
no-repeat	背景圖片不重覆出現，也就是只出現一次。

其實還有一個 inherit 屬性是繼承父層屬性的意思，只是 IE 瀏覽器並不支援，未來不知道會不會支援，所以建議不要使用 inherit 比較好，因為台灣還是有相當多人只使用 IE 瀏覽器，如果使用 inherit 的設計方式，可能會有相當多的人開啟網頁發生排版錯誤或是圖片呈現錯誤。

CSS background-repeat 範例、DIV 區塊背景圖片限制重覆

以上範例呈現結果如

此範例替一個 DIV 區塊設計背景圖片，透過 background-repeat 限制背景圖片只能顯示一次，寫成『background-repeat:no-repeat;』這樣，若要設計的是整個網頁背景圖片，則可以將 style 的語法寫在 body 標籤，如下方這樣的寫法。

控制整個網頁的背景是否重覆

這是比較基本的寫法，在 body 標籤內直接控制整個網頁背景圖片的呈現方式，同樣需要透過 background-image 與 background-repeat 的搭配設計，若要讓背景圖片在水平與垂直方向無限制的連續出現，則不一定需要使用 background-repeat，因為預設就會重覆出現。

延伸閱讀