MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概要

CSSbackground-repeat プロパティは背景画像の繰り返し描画に関する指定を行います。垂直、水平、その両方に対して繰り返しの有無を指定することが可能です。

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

初期値repeat
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値a list, each item consisting of two keywords, one per dimension
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* 値 1 つの構文 */
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;

<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>
/* 例の中のすべての 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;
}

/* background repeat CSS */
.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 の定義
勧告 初回定義

ブラウザー実装状況

機能 Chrome Edge Firefox Internet Explorer Opera Safari Servo
基本サポート1.0121.043.51.0?
Multiple backgrounds1.0123.6910.51.3?
Two-value syntax (different values for x & y directions)(有り)1213.09.0(有り)(有り)?
round and space keywords(有り)1249.09.010.5(有り)?
機能 Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
基本サポート??(有り)1.0???
Multiple backgrounds??(有り)(有り)???
Two-value syntax (different values for x & y directions)??(有り)13.0???
round and space keywords??(有り)49.0???

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, teoli, SphinxKnight, mitsuba-clover, Sebastianz, ethertank
 最終更新者: yyss,