背景画像が何枚も並ぶのはなぜ？background-repeatを切り替えよう

小さな模様の画像を背景にしたら、同じ柄が箱いっぱいに並んだ。1枚だけ置きたかったのに、どうして増えたんだろう？　背景画像の繰り返し方は、background-repeatで選べるよ。

このページでは、同じ画像で「縦横に並べる」「1枚だけ」「横だけ」「縦だけ」を切り替えられるようになる。準備はブラウザだけ。ページ内作例には、編集部で用意した24×24pxの模様画像を1枚使う。タイルとは、ここでは繰り返して敷く小さな画像のことだよ。手元の写真やファイルを読み込む必要はない。

まずは、画像1枚の大きさを見よう

作例の背景画像は、表示する幅と高さを24pxずつにそろえている。左上を並び始めの位置にし、画像の下には薄い背景色を付けてある。

.stage {
  background-color: #eeebff;
  background-size: 24px 24px;
  background-position: left top;
  background-repeat: repeat;
}

このコードとは別に、background-imageへタイル画像を指定している。background-imageは使う画像、background-sizeは表示する画像1枚の大きさを決める指定だよ。ここでは画像と表示サイズを固定して、繰り返し方だけを比べよう。

repeatは縦にも横にも並ぶ

background-repeatの初期値はrepeat。指定を省いたときも、画像を縦横に繰り返す。小さな画像を1枚読み込んだだけで、同じ柄がたくさん見えるのはこのためなんだ。

xは横方向、yは縦方向を表すよ。repeat-xを選んでも、1枚が横長に伸びるわけではない。24×24pxの画像が、横へ繰り返し並ぶ。

ここで選んでいるのは、画像の枚数ではなく繰り返す方向なんだ。箱の横幅が変わると、横に見える模様の数も変わる。同じ値でも画面の広さによって見える数が違うので、作例では枚数を数えるより、並ぶ方向に注目してみよう。

壁紙のように面を模様で埋めたいとき、上に帯状の模様を添えたいとき、隅に小さな絵を置きたいとき。同じ画像でも、目的に合う繰り返し方を選べるよ。まずは小さな画像で比べ、どの方向へ続いてほしいかを言葉にしてから選んでみてね。

動かしてみよう

1. 作例の「繰り返し」の選択欄がrepeatであることを見て、箱の縦横に並んだ模様を眺める。
2. no-repeatへ切り替える。左上の1枚が残り、ほかの場所では薄い背景色が見えるはずだよ。
3. repeat-xを選ぶ。上端に沿う1行を見て、2行目以降には画像が並ばないことを確かめる。
4. repeat-yを選ぶ。左端に沿う1列へ変わり、右側には背景色が見えることを比べる。
5. 「最初から試す」を押し、repeatの縦横に並ぶ状態へ戻す。

模様の形や1枚の大きさは同じでも、並ぶ方向が変わると印象も変わるよね。上の1行と左の1列を行き来すると、xとyも覚えやすいよ。

no-repeatでも背景色は残る

no-repeatは「背景を全部なくす」という意味ではない。背景画像を繰り返さなくする値なので、画像1枚とbackground-colorで指定した色は残る。画像がない部分や、画像の透明な部分の向こうに背景色が見えるんだ。

背景色も消したい場合は、背景色の指定を別に見直す必要がある。今回の作例では、画像が並ばない場所を観察しやすくするため、背景色は固定しているよ。背景色とopacityの違いも合わせて読むと、色と画像、要素全体を分けて考えやすくなる。

大きさと位置は、別の係にしよう

「模様を大きくしたい」ならbackground-size、「1枚をどこへ置くか」ならbackground-positionを使う。no-repeatへ変えただけでは、画像が中央へ移動したり、箱いっぱいに拡大したりはしない。今回の左上という位置は、left topで固定した結果だよ。

思ったように見えないときは、まず「最初から試す」で戻そう。自分のページへ写した場合は、画像を指定するbackground-image、1枚の大きさ、位置、繰り返し方を順に確認すると探しやすい。色を塗る範囲そのものが気になるときは、background-clipの三つの範囲へ進んでみてね。

2026年10月29日にMDNで四つの値、背景色、大きさと位置の役割を確認した。作例の四つの切り替えとリセットを319px・1280px幅のブラウザで検証し、タイルの描画と背景色を画像のピクセルでも照合したよ。