CSS background-repeat 屬性的基本語法
background-repeat: 背景圖片重複的方向或是否要重複顯示;
background-repeat 有四種常用參數，可以讓背景圖片重複佈滿整個區域（或網頁背景），或者是單純的往 X 軸（水平）方向或 Y 軸（垂直）方向重複，也可以讓背景圖片不要重複顯示，這四種參數必須這樣寫。參數說明
- background-repeat:repeat; //這是預設值，背景圖片會在水平與垂直方向重複。
- background-repeat:repeat-x; //只在 X 軸（水平）方向重複顯示
- background-repeat:repeat-y; //只在 Y 軸（垂直）方向重複顯示
- background-repeat:no-repeat; //不重複顯示
CSS background-repeat 屬性範例一、沿著 X 軸方向重複顯示背景圖片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS background-repeat</title>
</head>
<body style="background-image:url(背景圖片網址);background-repeat:repeat-x;">
網頁內容
</body>
</html>
範例一是個簡單的 HTML 網頁架構，我們在 <body> 標籤內使用了「style="background-image:url(背景圖片網址);background-repeat:repeat-x;"」這段語法，表示要在網頁顯示一個背景圖片，而且要沿著 x 軸方向重複顯示。如果少了 background-image 屬性，則 background-repeat 就沒有意義，關於背景圖片的語法請參閱：<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS background-repeat</title>
</head>
<body style="background-image:url(背景圖片網址);background-repeat:repeat-x;">
網頁內容
</body>
</html>
如果想讓背景圖片在垂直的 Y 軸方向重複顯示該怎麼做呢？請看範例二。
CSS background-repeat 屬性範例二、沿著 Y 軸方向重複顯示背景圖片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS background-repeat</title>
</head>
<body style="background-image:url(背景圖片網址);background-repeat:repeat-y;">
網頁內容
</body>
</html>
範例二與範例一唯一的差別僅在於 background-repeat 參數使用 repeat-y，其它的內容都完全一樣，各位讀者可以把範例一或範例二的程式碼複製起來，貼到一個空白文件，並存為 test.html 檔案，然後用瀏覽器開啟就可以看到效果了，不過背景圖片可能要自己準備，這個部份應該不是什麼難事，小畫家隨便畫一張圖就可以啦！<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS background-repeat</title>
</head>
<body style="background-image:url(背景圖片網址);background-repeat:repeat-y;">
網頁內容
</body>
</html>
更多 CSS background 系列