html - タブレットで覆われていない背景画像

Question

タブレットでサイトにアクセスすると、フッターの後に背景が表示されなくなりますか? ただし、ウィンドウサイズを小さくすると、デスクトップではこのように動作しません。

これはサイトです: http://www3.carleton.ca/clubs/sissa/html5/video.html

CSS:

body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    -moz-box-pack:center;
    box-pack:center;
    background:black;
    background:url('images/bg/bg14.jpg') no-repeat center center fixed;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    background-size: cover !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

これは私のnexus 7でどのように見えるかです：

ブラウザーで別のユーザー エージェントを使用すると、背景全体がカバーされます。

HTML:

<!--Site Main Body--> 
<div id="wrapper">
    <section id="body_div">

    </section>

    <footer id="footer">
        &copy; Copyright  by SimKessy
    </footer>

</div>
</body>
</html>

Answer 1

あなたは試すことができます

body {
    background-size: 100% 100%;
}

Answer 2

これが役立つかどうかはわかりませんが、テストする可能性はありませんが、html要素の代わりに要素に背景プロパティを追加してみてくださいbody。

を削除しまし!importantたが、必要に応じて追加できます。

html {
    background:black;
    background:url('images/bg/bg14.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}