背景图像不伸展以覆盖平板电脑高度

Question

我的网站有足够大的背景图片但是当我使用我的桌子看到它时，图像并没有覆盖整个屏幕。您可以在底部看到灰色背景（由我假设的浏览器生成）。此外，如果我在我的页面上展开文章，高度会增加，但图像不会增加到中心

这是我正在测试的网站：http://www3.carleton.ca/clubs/sissa/html5/

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:url('images/bg/bg14.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

Answer 1

我通过将规则-webkit-background-size: cover更改为-webkit-background-size: cover !important

来解决了这个问题

到目前为止似乎工作。

Answer 2

我使用background-size的百分比取得了更大的成功。

element {
  background:url(xyz.jpg) no-repeat center center;
  background-size:100% 100%;
  /* OR */
  background-size:100% auto;
  /* OR */
  background-size:auto 100%;
}

Answer 3

我通过在HTML上放置高度和宽度找到了解决方案。其他解决方案不会使背景填满我的Nexus 10屏幕。

html { 
    background: url(backgroundImg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
}

如果我在iPad上遇到问题，那么我会尝试添加！重要的那些。只是想看看我能否离开。