0

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

这是我正在测试的网站：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;
}

在此处输入图像描述

4

3 回答 3

3

我通过将规则更改为解决了这个-webkit-background-size: cover问题-webkit-background-size: cover !important

到目前为止似乎有效。

于 2013-04-03T20:56:59.640 回答
0

我在使用百分比时取得了更大的成功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-03T20:07:45.890 回答
0

我通过在 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 上遇到问题，那么我会尝试在 !important 中添加回来。只是想看看我能不能没有。

于 2013-10-31T16:36:18.023 回答