CSS background-repeat 屬性 - CSS 學習筆記

CSS background-repeat 這個屬性是用來設計網頁背景圖片是否要重複顯示，這裡請注意重複這兩個字，background-repeat 屬性只能決定背景圖片要不要重複顯示，不能決定要不要顯示，如果你要讓背景圖片不顯示，應該使用 display 屬性，background-repeat 屬性也可以決定背景圖片重複顯示的方向，在網頁背景設計規劃上非常好用。

CSS background-repeat 屬性程式語法

background-repeat: 參數;

CSS background-repeat 屬性共有幾個可以選擇的參數，整理如下表：

設定值	語法	說明
repeat	background-repeat:repeat;	預設背景圖片重覆顯示。
repeat-x	background-repeat:repeat-x;	背景圖片在 X 軸方向重覆顯示。
repeat-y	background-repeat:repeat-y;	背景圖片在 Y 軸方向重覆顯示。
no-repeat	background-repeat:no-repeat;	背景圖片不重覆顯示。

以下我們用幾個簡單的範例顯示給各位看看這個屬性的實際效果。

CSS background-repeat 屬性實際範例一、背景圖片在 X 軸方向重覆顯示

原始碼：在新視窗開啟程式碼文字檔

範例所呈現的效果

範例一呈現的是背景圖片在 X 軸方向的重覆顯示效果，我們刻意將 DIV 區塊的高度（height）設為 200px，背景圖片是長寬為 100x100 的方塊，從範例的效果可以看到，X 軸方向被背景圖片重覆填滿，而 Y 軸方向則沒有重覆顯示。

CSS background-repeat 屬性實際範例二、背景圖片在 Y 軸方向重覆顯示

原始碼：在新視窗開啟程式碼文字檔

範例所呈現的效果

範例二與範例一剛好是垂直的差異，背景圖片重覆顯示的方向由 X 軸改變為 Y 軸，由於 DIV 區塊的高度設為 200px;，剛好可以重覆顯示兩次背景圖片，至於 X 軸方向就玩全沒有重覆顯示。

CSS background-repeat 屬性實際範例三、背景圖片不重覆顯示

原始碼：在新視窗開啟程式碼文字檔

範例所呈現的效果

範例三因為使用了「background-repeat:no-repeat;」所以無論是在 X 軸方向還是 Y 軸方向，背景圖片都沒有重覆顯示，搞到最後，背景圖片就只有顯示一次。

延伸閱讀

參考資料

Wibibi: CSS background-repeat 重覆背景圖片