背景图像不覆盖在平板电脑上

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;
}