background-repeatプロパティの説明
CSSの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プロパティの構文は以下の通りです。
/* キーワード値 */
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を指定して下さい。
<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>
.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;
}