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