The background-repeat property in CSS specifies how a background image is repeated both horizontally and vertically within an element.
background-repeat の主な値
background ショートハンドと組み合わせるWebサイトのデザインでは、背景画像（background-image）の設定が欠かせません。画像をどのように繰り返して表示するかを制御するのが background-repeat プロパティです。シンプルな装飾から複雑なパターン背景まで、多彩な演出が可能になります。
CSS
.selector {
background-repeat: <value>;
}background-repeat は画像を「繰り返し表示する設定」をコントロールするためのプロパティです。
値（ <value> ）には複数の指定方法があります。以下に代表的なものを挙げていきます。
background-repeat の主な値CSS
.selector {
background-image: url("pattern.png");
background-repeat: repeat;
}CSS
.selector {
background-image: url("pattern.png");
background-repeat: no-repeat;
}CSS
/* 横方向のみ繰り返す */
.selector {
background-image: url("pattern.png");
background-repeat: repeat-x;
}
/* 縦方向のみ繰り返す */
.selector {
background-image: url("pattern.png");
background-repeat: repeat-y;
}repeat-x は画像を水平方向（X軸）にのみ繰り返します。repeat-y は画像を垂直方向（Y軸）にのみ繰り返します。repeat-x が便利です。CSS
.selector {
background-image: url("pattern.png");
background-repeat: round;
}CSS
.selector {
background-image: url("pattern.png");
background-repeat: space;
}background-repeat: no-repeat; を使います。background-position を指定するケースが多いです。background-position: center center;
repeat-x または repeat-y を使います。repeat-x を使い、ボーダーのように演出できます。background-repeat: repeat; が基本ですが、要素幅に合わせてピッタリ割り切れるようにしたい場合は background-repeat: round;、端をきれいに揃えたい場合は space; を活用するのも手です。background-size や背景の配置を指定する background-position と組み合わせることで、より洗練されたデザインを実現できます。CSS3では、1つの要素に複数の背景画像を設定できます。カンマ区切りで複数の画像とリピート指定をまとめると、レイヤーのように背景を重ねることが可能です。
CSS
.selector {
background-image: url("bg-pattern.png"), url("bg-decoration.png");
background-repeat: round, no-repeat;
background-position: left top, center center;
background-size: auto, contain;
}bg-pattern.png）は repeat で敷き詰め、2つ目の画像（bg-decoration.png）は no-repeat で1回だけ表示、といった具合に重ね合わせできます。background ショートハンドと組み合わせるCSSでは、背景に関するプロパティをまとめて指定できる**ショートハンド（background）**が存在します。background-repeat もまとめて指定することが可能です。
CSS
/* 個別に指定 */
.selector {
background-image: url("pattern.png");
background-repeat: repeat-x;
background-position: center;
background-size: cover;
}
/* ショートハンドでまとめて指定 */
.selector {
background: url("pattern.png") center / cover repeat-x;
}repeat / no-repeat / repeat-x / repeat-y は古くから存在し、ほぼすべてのモダンブラウザで問題なく動作します。
round と space は CSS3 で追加された比較的新しい値ですが、モダンブラウザ（Chrome、Firefox、Safari、Edge 等）ではすでにサポートされています。
もし古いIEなど、サポートが不十分なブラウザに対応したい場合は、必要に応じてフォールバックを検討してください。
background-size で明示的にサイズを指定するか、要素の大きさをあらかじめ固定しておくと、想定外のスクロールバー発生や画像の切れを防ぎやすくなります。
background-size で縮小して使うと画質が向上します。background-repeat を制御することが可能です。background-repeat プロパティは、背景画像の繰り返し方法を指定する重要なプロパティです。
repeat / no-repeat / repeat-x / repeat-y は古くから使われるベーシックな値。round と space はCSS3で追加され、より柔軟な配置が可能に。単純に繰り返しを設定するだけのプロパティと思われがちですが、ほかの背景系プロパティ（background-position, background-size など）や複数背景を組み合わせることで、多彩なデザインバリエーションを構築できます。デザイナーやコーダーにとって、表現の幅を広げる大切な要素です。ぜひ、自身のサイト制作やアプリケーション開発で積極的に活用してみてください。