background-size: coverを使うとき注意が必要なこと

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

background-size: coverを使った背景画像を拡大縮小して背景を覆う方法は、スクロールが生じるページだと下部に背景画像がない部分が生じることがあります。

修正方法

bodyに指定すると背景画像がない部分が起きなくなります。

body {
    width: 100%;
    height: 100%;
    background: url(背景画像のパス) left top no-repeat fixed;
    background-size: cover;
}

【要注意】対応ブラウザはIE9以上

IE8以下に対応するときは、下記のような方法があります。

  • ・css3pieを使ってハック
  • ・jQueryプラグインのjquery.backgroundSize.jsなどを使う
  • ・背景画像をimgタグに変換して、同じ位置に配置する方法（不具合多いらしい）
CSS3 CSSTIP