CSS background-size:cover; で全画面にならない

Question

実現したいこと

Webページを作っているのですが、フルスクリーンページの背景画像を全画面に表示させたいです。
スクリーン全体で表示したら上手くいったのですが、小さく表示した際にページ下部が余るようになってしまいました。
※ページ内の各要素は未完成なので、背景画像の表示範囲だけ改善できれば大丈夫です！

左が完成形で、右がそれに対する現在の状況です。

行った対策

ネットで調べた結果、coverという値を使えば実現できるとのことでした。
しかし、スクリーン全体でウィンドウを表示したときは上手くいったのですが、ウィンドウを小さくすると余白ができるようになってしまいました。
自分なりに調べてみましたが原因と改善方法が分からないので、是非解決方法をご教示ください。

書いたコードは以下になります。

body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height:1.7;
    color:#432;
    margin: 0%;
    background-image: url(../images/main-bg.jpg);
    background-color: #fff8e7;
    background-size:cover;
    background-repeat: no-repeat;
}   

Comments

[yambejp]

画像のアスペクトと表示領域が違いそうですが、縦いっぱいにして左右をあふれさすのでしょうか？
スクロールしたときにはどうするのでしょうか？

Answer 1

body自体が、画面全体より小さくなってしまっているのではないでしょうか。

min-height: 100%を足して、bodyが画面全体の高さを最低でも確保するようにするといいかも知れません。

Comments

[niconic73027793]

この本自分も買ったのですが、 min-height: 100vh;　で指定していました。