background-repeat

要素の背景画像を、どの方向へ、どのように繰り返すかを指定するプロパティ。小さな模様の並び方を切り替え、縦・横・両方向の違いを比べます。

CSSの`background-repeat`とは？

小さな背景画像の繰り返し方をライブプレビューで切り替えながら、repeat・no-repeat・repeat-x・repeat-y・space・roundの違いを初学者向けに解説します。

遊んでみよう

背景画像は54px × 54px・表示枠は260px × 200px

縦横へ繰り返します

CSS

.element background-repeat: repeat;

値のパターン

背景画像の繰り返し方 background-repeat

background-repeatの構成要素

01repeat | no-repeat

両方向をまとめて指定する

repeatは縦横へ敷き詰め、no-repeatは背景画像を繰り返さず1枚だけ表示します。

02repeat-x | repeat-y

横または縦だけ繰り返す

repeat-xは横方向だけ、repeat-yは縦方向だけ背景画像を繰り返す短縮表現です。

03<horizontal> <vertical>

横と縦を別々に指定する

2つの値を書くと、1つ目が横方向、2つ目が縦方向です。repeat spaceのように組み合わせられます。

早見表

初期値はrepeatです。繰り返す方向だけでなく、端で切るか、余白や画像サイズを調整して並べるかも選べます。

01repeat縦横へ繰り返す初期値

02no-repeat繰り返さず1枚だけ表示単体

03repeat-x横方向だけ繰り返すrepeat no-repeat

04repeat-y縦方向だけ繰り返すno-repeat repeat

05space画像を切らず、間へ均等に余白を配る余白

06round画像を伸縮し、隙間なく並べる伸縮

07repeat space横は反復、縦は均等配置2値

よくある使い方

小さな模様を背景へ敷き詰める

小さなテクスチャやドットを縦横へ反復すると、1枚の画像から広い背景パターンを作れます。

.pattern { background-repeat: repeat; }

横長の飾りを1列だけ並べる

区切り線や波形の画像を横方向だけ繰り返し、縦方向へ増えない帯として表示します。

.divider { background-repeat: repeat-x; }

ロゴやアイコンを1枚だけ置く

背景画像を装飾として1つだけ見せ、background-positionで置く位置を調整します。

.notice { background-repeat: no-repeat; background-position: right bottom; }

ポイント

repeatは端で切れ、spaceとroundは収まり方を調整する。

初期値のrepeatは必要な回数だけ背景画像を繰り返し、領域の端では画像の一部が切れることがあります。spaceは画像を切らずに並べて間へ余白を分配し、roundは隙間ができないよう画像を伸縮します。すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。背景画像の大きさはbackground-size、開始位置はbackground-positionで調整し、複数の背景画像にはカンマ区切りで画像ごとの繰り返し方を指定できます。