目次
はじめに｜background-repeatが「効かない…」それ、仕様です
CSSで背景画像を設定したとき、
- 画像が勝手に繰り返される
- repeatを指定したのに繰り返されない
- 横だけにしたいのに縦にも並ぶ
- スマホでパターンが崩れる
こんな経験はありませんか？
私も昔、ヒーローセクションに背景を設定して「repeat-xにしたのに全然変わらない…」と悩みました。原因は background-size: cover; でした。
結論から言うと、
background-repeatが効かないように見える原因は、ほぼ「サイズ」か「要素の状態」です。
この記事では、初心者〜実務レベルまでカバーしながら、
- 背景画像が繰り返される仕組み
- repeat / repeat-x / repeat-y / 2値指定の違い
- repeatが効かない本当の理由
- DevToolsでの確認方法
- 実務での正しい使い分け
を、現場目線でわかりやすく解説します。
CSSの背景画像はなぜ繰り返されるのか？
まず押さえておきたい基本です。
.box {
background-image: url("bg.png");
}この指定だけで、背景画像は縦横に自動で繰り返されます。
理由は単純で、
background-repeat: repeat;が初期値だからです。
つまり、何も指定しなければ「縦横に敷き詰める」動作になります。
background-repeatの基本4種類【まずはここを整理】
① repeat（初期値）
background-repeat: repeat;縦横どちらにも繰り返します。
パターン背景・テクスチャでは最も使います。
② no-repeat
background-repeat: no-repeat;画像を1枚だけ表示します。
ヒーロー画像ではほぼ必須です。
③ repeat-x
background-repeat: repeat-x;横方向のみ繰り返します。
例：
- 横ライン装飾
- 下線風デザイン
④ repeat-y
background-repeat: repeat-y;縦方向のみ繰り返します。
例：
- サイド装飾
- 縦ストライプ
実務で増えている「2値指定」
最近の実務ではこちらをよく使います。
background-repeat: repeat no-repeat;意味：
- 横：repeat
- 縦：no-repeat
repeat-x よりも柔軟で、可読性も高いです。
repeatが効かない原因【ほぼこのどれか】
原因① background-size: cover を使っている
background-size: cover;coverは「1枚で全体を覆う」指定です。
repeatが無効になるわけではありませんが、
見た目上、繰り返しが発生しません。
これが最も多い誤解です。
原因② 画像自体が大きすぎる
背景画像が要素より大きいと、繰り返しが見えません。
テスト時は小さい画像で確認すると分かりやすいです。
原因③ 要素に高さがない
.box {
background-image: url("bg.png");
}高さがなければ背景も表示されません。
.box {
height: 300px;
}まず高さを確認してください。
原因④ background-positionで端に寄っている
positionを指定していると、繰り返しが偏って見えることがあります。
background-position: top right;意図せず端に固定されていないか確認しましょう。
原因⑤ 画像が読み込まれていない
DevTools → Networkタブで404が出ていないか確認します。
【実務最速】DevToolsで一発確認する方法
- F12で開く
- Elementsで対象要素を選択
- Stylesで background を確認
- Computedで background-size / repeat を確認
ここで設定が上書きされていないかも確認できます。
特にフレームワーク使用時は、
別CSSに上書きされているケースがよくあります。
backgroundのまとめ書き（shorthand）の落とし穴
.box {
background: url("bg.png") no-repeat center/cover;
}shorthandでは、
- 画像
- repeat
- position
- size
がまとめて指定されます。
repeatを書かないと、意図せずrepeatになることがあります。
シームレス画像を使うと綺麗に繰り返せる
繰り返し前提なら、シームレス素材を使いましょう。
条件：
- 上下左右が自然につながる
- 継ぎ目が目立たない
テクスチャ背景では必須です。
backgroundとimgタグの正しい使い分け
backgroundが向いている
- 装飾
- パターン
- テクスチャ
imgが向いている
- 写真
- 意味を持つ画像
- SEO対象画像
装飾はbackground、
意味を持つものはimg。
ここを間違えるとSEO的にも不利です。
スマホ表示で崩れる理由
スマホでは、背景パターンが目立ちすぎることがあります。
@media (max-width: 768px) {
.box {
background-repeat: no-repeat;
background-size: cover;
}
}レスポンシブで調整すると自然になります。
チェックリスト｜repeatが効かないとき
- background-size: coverになっていないか
- 要素に高さがあるか
- 画像サイズが大きすぎないか
- shorthandで上書きしていないか
- DevToolsで最終値を確認したか
まとめ｜background-repeatは「サイズ理解」が9割
background-repeatが効かないと感じるとき、原因はほぼ以下です。
- background-sizeとの関係
- 要素の高さ不足
- 画像サイズ
- shorthand上書き
仕組みを理解すれば、迷うことはありません。
まずは小さな画像で試し、DevToolsで最終適用値を確認してみてください。
それだけで、「repeatが効かない」問題はほぼ解決できます。
関連記事（内部リンク想定）
- background-sizeの完全理解ガイド
- CSSのbackgroundプロパティまとめ
- レスポンシブデザイン基礎
- CSSでヒーローセクションを作る方法