背景尺寸：封面无响应答案

【问题标题】：background-size: cover not responsive背景尺寸：封面无响应
【发布时间】：2015-05-26 08:42:02
【问题描述】：

所以我有一个像这样设置的全屏背景：

#div {
    background-image: url("images/slide1.jpg");
    background-position: center 20%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

背景图片会根据所有视口大小调整大小，但是当我从手机查看网站时，它似乎只显示了整个图片的一小部分 - 基本上background-size: cover; 规则似乎不起作用.还应该注意的是，如果我在我的电脑手机上设置窗口大小，背景会正确调整大小。当我使用响应式显示工具“responsivetest.net”查看它时，它也会正确调整大小。只是当我真正在手机上打开它时。

一如既往，我们非常感谢任何建议。

【问题讨论】：

什么手机，主要是操作系统和版本？然后使用caniuse.com 确保操作系统/版本实际支持background-size : cover。
感谢@Jasper，这是一个很好的资源。仍然根据该列表，它是受支持的。
@Jasper 所有背景选项
我在问您正在测试的移动设备的操作系统/版本。还发布您在哪些桌面浏览器上进行测试。这是获得帮助的关键信息。
啊，我明白了。我在我的 iphone 上使用 7.0.2 版本，并在 Firefox、Safari、chrome 和 ie 上测试了该网站。

标签： css mobile background responsive-design

【解决方案1】：

我正在为一个正在开发的投资组合网站做类似的事情，它在移动设备上运行良好。这是我的 CSS 工作代码：

    display: table;
width: 100%;
height: auto;
padding: 100px 0;
background: url(../img/bbg1.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

因此您可以看到一些可以尝试更改的内容，例如显示高度。

在您的 mobile device 上测试此网站

【讨论】：

感谢@user3362232，当我将高度更改为自动时，背景图像仅覆盖内容周围允许的内边距 - 而不是全屏。我想我可以将它全部嵌套在一个设置为 height: 100%; 的 div 中？