在CSS中，使用background-repeat屬性可以設置背景圖像是否平鋪，並且可以設置如何平鋪。
語法：
background-repeat:取值;
說明：
background-repeat屬性取值如下：
舉例：
這裡有一張25px×25px的圖片，我們設置3個div元素為200px×100px，並且把div元素背景圖像設置為該圖片。
圖1 25px×25px圖像
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-repeat屬性</title>
<style type="text/css">
/*設置div元素的共同樣式*/
div
{
width:200px;
height:100px;
background-image:url("../App_images/lesson/run_cj/flower.jpg");
text-align:center;
border:1px dashed gray;
}
/*設置3個div元素的個別樣式*/
#div2{background-repeat:repeat-x;}
#div3{background-repeat:repeat-y;}
#div4{background-repeat:no-repeat;}
hr{border-color:red;}
</style>
</head>
<body>
<div id="div1">
<h3>靜夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>舉頭望明月，低頭思故鄉。</p>
</div>
<hr/>
<div id="div2">
<h3>靜夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>舉頭望明月，低頭思故鄉。</p>
</div>
<hr/>
<div id="div3">
<h3>靜夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>舉頭望明月，低頭思故鄉。</p>
</div>
<hr/>
<div id="div4">
<h3>靜夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>舉頭望明月，低頭思故鄉。</p>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
因為第一個div元素沒有設置background-repeat屬性值，因為浏覽器會采用background-repeat默認值“repeat”，背景圖片會在水平和垂直兩個方向同時平鋪。第二個div元素background-repeat屬性值為“repeat-x”，因此背景圖片會在水平方向（x軸）平鋪。第三個div元素background-repeat屬性值為“repeat-y”，因此背景圖片會在垂直方向（y軸）平鋪
大家可能對hr元素的屬性設置很奇怪，為什麼設置hr的border-color屬性值為red，hr的顏色就會改變，而不是設置hr的color屬性為red或者background-color為red呢？這跟hr本身特點有關，在CSS進階“hr的CSS設置”這一節我們會詳細講解到。
注意：設置有背景圖片的元素的寬或高大於背景圖片本身的寬或高，才會有平鋪效果。