background-repeat

概要

background-repeat プロパティは背景画像の繰り返し描画に関する指定を行います。垂直、水平、またはその両方に対して繰り返しの有無を指定する事が可能です。 繰り返した背景が対象の描画領域に正確に納まらない場合の描画方法は、製作者によって指定可能です。デフォルトでは全面を覆うまで繰り返され、はみ出した部分は領域のエッジによって切り取られます。他にも、背景画像のリサイズを伴う方法や、背景画像間にスペースを挿入する方法など、別の敷き詰め方法を選択する事も可能です。

構文

/* 値 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">&nbsp;</div>
    </li>
    <li>repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>
</ol>

CSS

/* 例の中のすべての DIV で共有 */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* 複数の画像 */
.five {
    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 での複数の背景の利用方法