平板电脑未覆盖的背景图片

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

这是我的连结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;
}