background-repeatプロパティは、背景画像の繰り返しを指定するプロパティです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

repeat｜repeat-x｜repeat-y｜no-repeat｜inherit

初期値

repeat

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

値の解説

repeat

水平、垂直の両方向に画像を繰り返します

repeat-x

水平方向に画像を繰り返します

repeat-y

垂直方向に画像を繰り返します

no-repeat

繰り返しません

斜めに繰り返すとかって値は存在していないみたいです。有ったら良いかもってちょっと思いました。

background-repeatのサンプル

.item_no-repeat,
.item_repeat-y,
.item_repeat-x,
.item_repeat {
  margin: 20px;
  padding: 20px;
  padding-bottom: 80px;
  background-image: url(../img/property/bg_repeat.gif);
  border: 10px solid #999;
}

.item_repeat {
  background-repeat: repeat;
}

.item_repeat-x {
  background-repeat: repeat-x;
}

.item_repeat-y {
  background-repeat: repeat-y;
}

.item_no-repeat {
  background-repeat: no-repeat;
}

<div class="item_repeat">
<p>繰り返し</p>
</div>

<div class="item_repeat-x">
<p>水平方向の繰り返し</p>
</div>

<div class="item_repeat-y">
<p>垂直方向の繰り返し</p>
</div>

<div class="item_no-repeat">
<p>繰り返さない</p>
</div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

繰り返し

水平方向の繰り返し

垂直方向の繰り返し

繰り返さない

IE6, 7で見てもらうと、背景の開始位置がボーダーからになってしまうので、他のブラウザと位置がずれてしまいます。 border関連のプロパティと合わせて使う場合は、ハックなどで対応しましょう。