【background-repeat】背景画像の並び方を指定

background-repeatプロパティでは、背景画像の並び方を指定することができます。

通常、背景画像はタイル状に敷き詰められて表示(同じ画像を繰り返して表示)されますが、background-repeatプロパティを使用すると水平方向、あるいは垂直方向にのみ繰り返して表示させるなど、背景画像の並び方についての設定ができます。

書式

  • background-repeat : ……… 背景画像の繰り返し(並び方)の設定

★:repeat、repeat-x、repet-y、no-repeat、inherit

repeat
縦横に背景画像を繰り返して、タイル状に並べる
repeat-x
横方向にのみ背景画像を繰り返して並べる
repeat-y
縦方向にのみ背景画像を繰り返して並べる
no-repeat
背景画像を繰り返さず、1つだけ表示

使用した時の例

div {
  background-image: url("image.jpg");
  height:200px;
  font-weight:bold;
  border:solid #ccc 1px;
}

.sample1 {background-repeat: repeat;}
.sample2 {background-repeat: repeat-x;}
.sample3 {background-repeat: repeat-y;}
.sample4 {background-repeat: no-repeat;}
<div class="sample1">repeat(縦横に繰り返し)</div>
<div class="sample2">repeat-x(横に繰り返し)</div>
<div class="sample3">repeat-y(縦に繰り返し)</div>
<div class="sample4">no-repeat(1つのみ表示)</div>

ブラウザ上の表示例

repeat(縦横に繰り返し)
repeat-x(横に繰り返し)
repeat-y(縦に繰り返し)
no-repeat(1つのみ表示)

対応ブラウザなどのデータ

初期値 repeat 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報