CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

The background-repeat property in CSS specifies how a background image is repeated both horizontally and vertically within an element.

background-repeat

はじめに
基本の書き方（構文）
background-repeat の主な値
代表的な利用シーンと注意点
より高度な使い方：複数の背景を重ねる
background ショートハンドと組み合わせる
ブラウザ対応状況
実践的なヒント＆テクニック
まとめ

はじめに

Webサイトのデザインでは、背景画像（background-image）の設定が欠かせません。画像をどのように繰り返して表示するかを制御するのが background-repeat プロパティです。シンプルな装飾から複雑なパターン背景まで、多彩な演出が可能になります。

基本の書き方（構文）

CSS

.selector {
	background-repeat: <value>;
}

background-repeat は画像を「繰り返し表示する設定」をコントロールするためのプロパティです。

値（ <value> ）には複数の指定方法があります。以下に代表的なものを挙げていきます。

`background-repeat` の主な値

repeat

CSS

.selector {
	background-image: url("pattern.png");
	background-repeat: repeat;
}

デフォルト値。
背景画像を上下左右にタイル状に繰り返して配置します。
画像サイズが小さい場合や、パターンを全面に敷き詰めたいときに便利です。

no-repeat

CSS

.selector {
	background-image: url("pattern.png");
	background-repeat: no-repeat;
}

画像を1回だけ表示し、繰り返しを行いません。
バナーやロゴのように1つの画像だけを表示したい場合などによく使われます。

repeat-x / repeat-y

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 が便利です。

round（CSS3）

CSS

.selector {
	background-image: url("pattern.png");
	background-repeat: round;
}

画像が要素のサイズに合わせてちょうど割り切れるようにスケーリングされます。
タイル状のパターンを敷くときに、「端数が切れないように」自動調整してくれます。
画像が拡大・縮小されるため、解像度の低い画像を使用すると画質が劣化する場合があります。

space（CSS3）

CSS

.selector {
	background-image: url("pattern.png");
	background-repeat: space;
}

画像同士の間隔（スペース）が等しくなるように繰り返されます。
要素の端には余白が入り、画像が途切れたり切れたりしにくくなります。
レイアウトやデザイン上、等間隔にパターンを配置したい場合に有効です。

代表的な利用シーンと注意点

バナー画像やロゴを固定したい場合

繰り返しが不要なときは background-repeat: no-repeat; を使います。
背景画像が中心に1つだけ表示されるように、同時に 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回だけ表示、といった具合に重ね合わせできます。
カンマで区切られた順番がz軸の重なり順（前面が後に書いた方）になる点に注意してください。

`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;
}

ショートハンドでは、背景画像背景位置 / 背景サイズ繰り返し指定の順で書くと1行で指定できます。
可読性を重視する場合は、個別のプロパティで書く方法もおすすめです。

ブラウザ対応状況

repeat / no-repeat / repeat-x / repeat-y は古くから存在し、ほぼすべてのモダンブラウザで問題なく動作します。

round と space は CSS3 で追加された比較的新しい値ですが、モダンブラウザ（Chrome、Firefox、Safari、Edge 等）ではすでにサポートされています。

もし古いIEなど、サポートが不十分なブラウザに対応したい場合は、必要に応じてフォールバックを検討してください。

実践的なヒント＆テクニック

画像の繰り返しが意図せず見切れる場合の対策

background-size で明示的にサイズを指定するか、要素の大きさをあらかじめ固定しておくと、想定外のスクロールバー発生や画像の切れを防ぎやすくなります。

高解像度（Retinaディスプレイ）用に倍サイズの画像を準備

スマートフォンや高解像度ディスプレイに対応するために、通常の2倍サイズの背景画像を準備し、CSSの background-size で縮小して使うと画質が向上します。
ただし、繰り返しの際に重たい画像を大量に読み込む可能性があるため、ファイルサイズが大きくなりすぎないよう注意しましょう。

JavaScriptとの連携

SPA（シングルページアプリケーション）やユーザー操作に応じて背景を動的に切り替えたい場合、JavaScriptでクラスを切り替えたり、インラインスタイルを変更したりして background-repeat を制御することが可能です。
動画背景やアニメーションとの組み合わせも応用次第で実現可能です。

まとめ

background-repeat プロパティは、背景画像の繰り返し方法を指定する重要なプロパティです。

repeat / no-repeat / repeat-x / repeat-y は古くから使われるベーシックな値。
round と space はCSS3で追加され、より柔軟な配置が可能に。
レスポンシブ対応や複数背景の活用で、より高度なデザインも実現できます。

単純に繰り返しを設定するだけのプロパティと思われがちですが、ほかの背景系プロパティ（background-position, background-size など）や複数背景を組み合わせることで、多彩なデザインバリエーションを構築できます。デザイナーやコーダーにとって、表現の幅を広げる大切な要素です。ぜひ、自身のサイト制作やアプリケーション開発で積極的に活用してみてください。

CSS