background-repeat

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

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

試してみましょう

構文

css
/* キーワード値 */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
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: revert;
background-repeat: revert-layer;
background-repeat: unset;

解説

このプロパティは、 2 つの <repeat-style> キーワード、または 1 つのキーワードを 2 つの値の短縮形として受け入れます。 2 つの値が指定された場合、最初の値は水平方向の繰り返し動作を定義し、 2 番目の値は垂直方向の動作を定義します。 プロパティ値は、水平方向のみ、垂直方向のみ、または全く繰り返さないように使用することができます。

既定値は repeat repeat です。この値では、背景画像は内在的なアスペクト比を維持したまま、水平および垂直方向に繰り返されて背景領域全体を覆い、端の画像は要素のサイズに合わせて切り取られます。どの端が切り取られるかは、 background-position の値によって異なります。繰り返される回数と端の画像が切り取られる量は、背景領域のサイズと background-size の値によって異なります。

繰り返される画像は等間隔に配置され、繰り返される画像が切り取られることなく、アスペクト比を確実に保持します。 space 値を使用した場合には、背景描画領域のアスペクト比が画像と異なる場合、またはいずれかの方向が背景画像のサイズの倍数でない場合、背景画像に覆われない領域ができます。

あるいは、繰り返される背景画像は、切り取りを行わずに、領域全体に応じたサイズに引き伸ばすこともできます。 round では、背景画像のアスペクト比が描画領域のものと異なる場合、利用できる空間すべてに繰り返される画像が引き伸ばされ、追加の繰り返される画像を追加する空間が生まれるまで、その状態が続きます。例えば、指定された背景画像が 100px × 100px で、背景描画領域が 1099px × 750px の場合、画像は水平方向に 10 回、垂直方向に 7 回繰り返され、合計 70 回繰り返されます。それぞれの画像は、 109.9px × 105px になるよう、両方向に引き伸ばされます。描画領域の幅が 1px 増えて 1100px 幅になると、 11 番目の画像が水平方向に収まり、合計 77 枚の画像が繰り返され、各画像は幅 100px、高さ 105px で、垂直方向にのみ引き伸ばされて描画されます。

このプロパティでは、最大 2 つの <repeat-style> キーワードを受け入れます。最初の値は水平方向の反復です。 2 つ目の値は垂直方向の動作です。 repeat-x または repeat-y 以外の値に 1 つの値だけを設定した場合、その値は両方の辺に適用されます。以下の値が指定できます。

repeat

既定値です。画像は背景画像が描画領域全体を覆うのに必要な回数だけ繰り返され、描画領域の寸法が背景画像の寸法の倍数でない場合は、端の画像が切り取られます。

no-repeat

画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は CSS の background-position プロパティで定義されます。

space

画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。 background-position プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。space を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。

round

利用可能な空間が大きくなるにつれ、繰り返される画像は、もう1つ追加する余裕ができるまで(隙間なく)引き伸ばされます。これは、<repeat-style>値の中で唯一、背景画像の歪みにつながる可能性がある値です。これは、背景画像のアスペクト比が背景描画領域のものと異なる場合に発生します。

repeat-x

repeat no-repeat の短縮形で、背景画像は水平方向にのみ繰り返され、描画領域の幅が背景画像の幅の倍数でない場合は、端の画像が切り取られます。

repeat-y

no-repeat repeat の短縮形で、背景画像は垂直方向にのみ繰り返され、描画領域の高さが背景画像の高さの倍数でない場合は、端の画像が切り取られます。

<repeat-style> キーワードが 1 つだけ指定された場合、その値は次の 2 値構文の短縮形となります。

単一の値 同等の 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

公式定義

初期値repeat
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値1 つの方向につき 2 つのキーワードで構成される項目のリスト
アニメーションの種類離散値

形式文法

background-repeat = 
<repeat-style>#

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

background-repeat の設定

HTML

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 (複数の画像)
    <div class="seven"></div>
  </li>
</ol>

CSS

css
/* 例のすべての div で共通 */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(star-solid.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(star-solid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

結果

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

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-repeat

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-repeat
Two-value syntax (different values for x & y directions)
Multiple backgrounds
no-repeat
repeat
repeat-x
repeat-y
round
space

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

関連情報