目次
- はじめに：background-repeatが「効かない」と感じたことはありませんか？
- CSSの背景画像は初期状態で繰り返される
- background-repeatの基本4種類
- ① repeat（初期値）
- ② no-repeat
- ③ repeat-x
- ④ repeat-y
- より細かく制御できる「2値指定」
- repeatが効かない原因【チェックリスト】
- 原因① background-size: cover を指定している
- 原因② 画像サイズが大きすぎる
- 原因③ 要素に高さがない
- 原因④ 画像パスが間違っている
- 実務でよく使うbackgroundのまとめ書き（shorthand）
- シームレス画像を使うと綺麗に繰り返せる
- imgタグとの使い分け
- 背景が向いている場合
- imgタグが向いている場合
- スマホ表示での注意点
- まとめ：background-repeatを正しく理解しよう
はじめに：background-repeatが「効かない」と感じたことはありませんか？
CSSで背景画像を設定したとき、
- 画像が勝手に繰り返される
- repeatを指定したのに繰り返されない
- 横だけにしたいのに縦にも並んでしまう
このような経験はありませんか？
background-repeatは一見シンプルなプロパティですが、
background-sizeや要素の高さ、画像サイズの影響を受けるため、初心者がつまずきやすいポイントでもあります。
この記事では、
- 背景画像が繰り返される仕組み
- repeat / repeat-x / repeat-y / no-repeat の違い
- repeatが効かない原因と対処法
- 実務での使い分け
を、実例を交えながらわかりやすく解説します。
CSSの背景画像は初期状態で繰り返される
まず押さえておきたい基本です。
.box {
background-image: url("bg.png");
}この指定だけで、背景画像は縦横に自動で繰り返されます。
理由は、background-repeat の初期値が repeat だからです。
つまり、何も指定しない場合は
background-repeat: repeat;が適用されている状態になります。
background-repeatの基本4種類
① repeat（初期値）
background-repeat: repeat;- 横方向に繰り返す
- 縦方向にも繰り返す
テクスチャやパターン背景で最もよく使われます。
② no-repeat
background-repeat: no-repeat;背景画像を1枚だけ表示します。
ヒーロー画像やバナー背景では、ほぼ必須の指定です。
background-size: cover; と組み合わせて使うことが多いです。
③ repeat-x
background-repeat: repeat-x;横方向のみ繰り返します。
よく使われる例：
- 横ラインの装飾
- ボーダー風デザイン
④ repeat-y
background-repeat: repeat-y;縦方向のみ繰り返します。
よく使われる例：
- サイドバー背景
- 縦ストライプ装飾
より細かく制御できる「2値指定」
CSSでは次のような書き方も可能です。
background-repeat: repeat no-repeat;これは、
- 横方向：repeat
- 縦方向：no-repeat
という意味です。
repeat-x / repeat-y を使わなくても、
より柔軟に制御できます。
実務ではこちらの指定を使う場面も増えています。
repeatが効かない原因【チェックリスト】
「background-repeatが効かない」と感じる場合、
原因はほぼ次のどれかです。
原因① background-size: cover を指定している
background-size: cover;coverは要素全体を1枚で覆う指定です。
repeatが無効になるわけではありませんが、
結果的に1枚で埋まるため繰り返しが見えません。
原因② 画像サイズが大きすぎる
背景画像自体が要素より大きい場合、
繰り返されていないように見えることがあります。
小さな画像で試すと挙動が確認しやすいです。
原因③ 要素に高さがない
.box {
background-image: url("bg.png");
}高さがないと背景は表示されません。
.box {
height: 300px;
}まずは要素の高さを確認しましょう。
原因④ 画像パスが間違っている
画像が正しく読み込まれていないケースもあります。
ブラウザのDevToolsを開き、
Networkタブで404エラーが出ていないか確認すると確実です。
実務でよく使うbackgroundのまとめ書き（shorthand）
実務では個別指定よりも、まとめて書くことが多いです。
.box {
background: url("bg.png") repeat top left;
}このように、
- 画像URL
- repeat指定
- position
を一括で指定できます。
repeatを明示しないと、
意図せず繰り返される場合があるため注意しましょう。
シームレス画像を使うと綺麗に繰り返せる
背景を繰り返す場合は、シームレス画像が重要です。
特徴：
- 上下左右が自然につながる
- 継ぎ目が目立たない
テクスチャ背景やパターン背景では、
シームレス素材を使うことで美しいデザインになります。
imgタグとの使い分け
背景が向いている場合
- 模様やパターン
- テクスチャ
- 装飾目的
imgタグが向いている場合
- 写真
- 意味を持つ画像
- SEO対象の画像
background-image はあくまで装飾目的。
意味を持つ画像は img タグを使いましょう。
スマホ表示での注意点
スマホでは背景パターンが目立ちすぎることがあります。
@media (max-width: 768px) {
.box {
background-repeat: no-repeat;
}
}レスポンシブ対応を考慮すると、
デザインの崩れを防げます。
まとめ：background-repeatを正しく理解しよう
CSSで背景画像を繰り返す基本は次の4つです。
- repeat（縦横）
- repeat-x（横のみ）
- repeat-y（縦のみ）
- no-repeat（繰り返さない）
さらに、
- background-sizeとの関係
- 要素の高さ
- 画像サイズ
を理解すれば、
「repeatが効かない」問題はほぼ解決できます。
まずは小さな画像で挙動を確認しながら、
仕組みを体感してみてください。