background-repeat

CSSbackground-repeat プロパティは、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。

既定では、繰り返された画像が要素のサイズによって切り取られます。他にも、背景画像のリサイズを伴う方法 (round を使用) や、背景画像間にスペースを挿入する方法 (space を使用) など、別の敷き詰め方法を選択することも可能です。

構文

/* キーワード値 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 値2つの構文: 水平方向 | 垂直方向 */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* グローバル値 */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

<repeat-style>
値1つの構文は完全な値2つの構文に対する一括指定です。
単一の値 対応するペアの値
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:
repeat 画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。
space 画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。background-position プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。space を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。
round 利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。
no-repeat 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は background-position CSS プロパティで定義されます。

形式文法

<repeat-style>#

where
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

HTML

<ol>
  <li>no-repeat
    <div class="one"></div>
  </li>
  <li>repeat
    <div class="two"></div>
  </li>
  <li>repeat-x
    <div class="three"></div>
  </li>
  <li>repeat-y
    <div class="four"></div>
  </li>
  <li>space
    <div class="five"></div>
  </li>
  <li>round
    <div class="six"></div>
  </li>
  <li>repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* 例のすべての div で共通 */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 160px;
    height: 70px;
}

/* 背景の繰り返し */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* 複数の画像 */
.seven {
  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
  background-repeat: repeat-x,
                     repeat-y;
  height: 144px;
}

結果

この例では、リストの各要素に background-repeat の異なる値が対応付けられています。

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background-repeat の定義
勧告候補 複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、spaceround キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。
CSS Level 2 (Revision 1)
background-repeat の定義
勧告 特筆すべき変更点はなし
CSS Level 1
background-repeat の定義
勧告 初回定義
初期値repeat
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
計算値a list, each item consisting of two keywords, one per dimension
アニメーションの種類個別

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-repeatChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報