background-repeat:背景画像の繰り返しを指定する

初期値 repeat
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

background-repeatプロパティの説明

background-repeatは、背景画像をどのように繰り返すかを指定します。要素の幅や高さが背景画像のサイズを超える場合に、その切れ目を埋めるように配置するか、しないかを制御します。

繰り返す方向を垂直軸、水平軸、両軸から選ぶことができます。何も指定しない場合は、初期値であるrepeatが選択され、背景を画像で埋め尽くします。

background-originおよびbackground-positionで背景画像の初期位置を指定した場合は、その位置を基点に繰り返しが発生します。

背景関連のプロパティを一括で指定する場合は、ショートハンド・プロパティのbackgroundを使用して下さい。

background-repeatに指定できる値

<repeat-style>
画像の繰り返しに関するキーワード型の値です。キーワードは一つ、ないし二つを記載します。キーワードを一つ指定した場合は、上下左右の全方向に対して繰り返しを指定したことになります。二つのキーワードを列記した場合、最初の値は水平方向の繰り返しを表し、二つ目の値は垂直方向の振る舞いを表します。各キーワードの特徴は以下の通りです。
repeat
背景画像を要素の範囲が続く限り繰り返します。背景画像の終端が範囲に収まりきらない場合は、そこで切り取られます。キーワードを二つ使って指定するrepeat repeatと同じ意味です。
repeat-x
背景画像を水平方向に限って繰り返します。キーワードを二つ使って指定するrepeat no-repeatと同じ意味です。
repeat-y
背景画像を垂直方向に限って繰り返します。キーワードを二つ使って指定するno-repeat repeatと同じ意味です。
space
背景画像を切り抜かずに表示できる分だけ均等に配置します。先頭の画像と終端の画像を背景の表示可能領域の端に寄せ、その間を埋めるように繰り返しが発生します。画像の元サイズが入り切らない余白が生まれた場合は、そのまま余白として各背景画像の間に均等に振り分けられます。背景画像の大きさが要素よりも大きい場合に限って切り抜かれます。
round
背景画像を表示できる範囲に応じて、元の画像が切り抜かれないようにサイズを伸縮させて空白を埋めます。背景画像は、元のサイズの半分が収まる余裕が生じるまで引き伸ばされ、次の画像が入り込むと縮小します。
no-repeat
背景画像を繰り返さずに一度だけ描画します。要素のサイズが背景画像を上回る場合は、背景色か背後に位置している要素が表示されます。

background-repeatの使い方とサンプル

background-repeatプロパティの構文は以下の通りです。

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

/* 複数のキーワード値(水平方向・垂直方向) */
background-repeat: repeat repeat;
background-repeat: repeat space;
background-repeat: space round;
background-repeat: no-repeat round;

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

background-repeatの実例

それでは簡単なサンプルを見てみましょう。単純に要素の背景として配置した画像に、それぞれ別のbackground-repeatの値を指定します。背景画像の初期位置を変更する場合は、background-originおよびbackground-positionを指定して下さい。

表示確認
CSS
.samp_box {
	padding: 1rem;
	background: #ccc;
	text-align: center;
}
.samp_box > div {
	width: 200px;
	margin: 1rem auto 0 auto;
	padding: 2rem;
	border: 10px dashed #039;
	background: url(../images/sample_bg_stripe.png);
}
#item_1 {
	background-repeat: repeat;
}
#item_2 {
	background-repeat: repeat-x;
}
#item_3 {
	background-repeat: repeat-y;
}
#item_4 {
	background-repeat: space;
}
#item_5 {
	background-repeat: round;
}
#item_6 {
	background-repeat: no-repeat;
}
HTML
<div class="samp_box">
	<p>background-repeat</p>
	<div id="item_1">repeat</div>
	<div id="item_2">repeat-x</div>
	<div id="item_3">repeat-y</div>
	<div id="item_4">space</div>
	<div id="item_5">round</div>
	<div id="item_6">no-repeat</div>
</div>

background-repeatに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える