背景图片无法覆盖平板电脑的高度

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

这是网站IM测试图像：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; 
}

enter image description here

来源

2013-04-03 Batman

你可以添加一个链接到网站？或者添加其余的CSS/HTML？ – JSW189 2013-04-03 19:58:14

对不起忘了：http://www3.carleton.ca/clubs/sissa/html5/ – Batman 2013-04-03 19:59:10

我的FireFox，Chrome和Safari看起来不错。你解决了你的问题吗？ – Dawson 2013-04-03 20:37:44

我解决了这个问题，通过改变规则来-webkit-background-size: cover-webkit-background-size: cover !important

似乎迄今的工作。

来源

2013-04-03 20:56:59 Batman

只有在别的东西覆盖它时。 – NoBugs 2014-04-02 00:21:21

我使用百分比与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%; 
}

来源

2013-04-03 20:07:45

不应该背景大小：封面;规则做同样的事情？我是Chrome（桌面）当我检查元素时，没有任何背景大小的规则正在应用。 – Batman 2013-04-03 20:50:28

我找到了一个解决方案，将高度和宽度放在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上，然后我会尝试在加回来了！就这些重要。只是想看看我能不能没有。

来源

2013-10-31 16:36:18

背景图片无法覆盖平板电脑的高度

回答

相关问题