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 2015年7月.
background-repeat は CSS のプロパティで、背景画像をどのように反復するかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく反復しないようにしたりすることができます。
試してみましょう
background-repeat: repeat-x;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: space repeat;
<section id="default-example">
<div id="example-element"></div>
</section>
#example-element {
background: #cccccc url("/shared-assets/images/examples/moon.jpg") center /
120px;
min-width: 100%;
min-height: 100%;
}
構文
/* キーワード値 */
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> キーワードまたは 2 つの値の一括指定としての単一のキーワードのリストを受け入れます。最初の値は水平方向の反復です。 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-block |
repeat-inline |
<repetition>{1,2}
<repetition> =
repeat |
space |
round |
no-repeat
例
background-repeat の設定
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
/* 例のすべての 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("/shared-assets/images/examples/favicon32.png");
background-repeat: repeat-x, repeat-y;
height: 144px;
}
結果
この例では、リストの各要素に background-repeat の様々な値が対応付けられています。
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-repeat |