background-size: coverの勘所

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

修正方法

bodyに指定するとこれが起きなくなる。

filename

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

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

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

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