BG背景切れ改善 CSS

Webサイトをデザインしていると、背景グラデーションが途中で切れてしまう現象に出会ったことはありませんか？
たとえば body に linear-gradient() を指定しているのに、画面の途中で真っ白になる。
その原因は、意外にもCSSの“高さ”の仕様にあります。

❓ なぜ背景が途切れるのか

多くの人がまず以下のように html や body に背景を指定します

html, body {
height: 100%;
background: linear-gradient(to bottom, #F1FCFF, #31ADE6);
}

しかしこの指定だけでは、背景が画面全体に表示されないことがあります。

✅ 理由は、「height: 100%」は親要素依存だから

  • html → ブラウザのビューポート（≒画面の高さ）

  • body → html の高さ = 中身が少ないと body の高さも小さい

  • → 中の .container などが overflow: hidden や position: absolute の影響を受けて「小さく」なると、背景の表示範囲も小さくなる

    💡 解決法：「ラッパー構造」で背景を別管理する

    この問題を根本的に回避する方法が、背景専用のラッパーを用意することです。

    ✅ HTML構造（例）

    html
    <body>
    <div class="background-wrap">
    <div class="container">
    <!-- コンテンツ -->
    </div>
    </div>
    </body>

    ✅ CSS指定（例）

    css
    .background-wrap {
    min-height: 100vh;
    background: linear-gradient(to bottom, #F1FCFF, #31ADE6);
    }

     

  • 🎯 なぜこの方法でうまくいくのか

    背景の linear-gradient を body に指定すると、body の高さに依存します。
    ところが、container に overflow: hidden や position: absolute などがあると、body の高さが中身に追従しなくなるのです。

    一方 .background-wrap に min-height: 100vh を指定すると：

    • 画面高を確実に確保

    • 中身が短くても背景だけはしっかり表示

    • CSSの構造を「背景」と「中身」で分離でき、再利用しやすい

    ✅ まとめ：CSSでは“構造”と“背景”を切り離そう

    よくあるミス 推奨される方法
    body に background を設定 .background-wrap を使って背景を分離
    overflow: hidden による高さ制限 min-height: 100vh を背景ラッパーに指定
    グラデーションが途切れる 常に画面いっぱいの背景表示を保証