css - CSS媒体正文背景图片不可见

我正在维护网上商店http://www.binkfournituren.nl。样式表包含几行代码，用于响应行为。

响应行为的部分变化是页脚背​​景图像。最初在全屏打开网站时，图像设置在body标签上，如下图所示：

body{
   margin:0;
   padding:0;
   color:#444;
   font-family:"Georgia",Verdana,Arial,Helvetica,sans-serif;
   min-height:100%;
   background:url(../image/footer-bg-400-Green.png) left bottom repeat-x
}

在平板电脑/手机或较小的浏览器窗口上查看页面时，应在body元素上设置其他图像。例如，应使用以下CSS代码完成此操作：

@media only screen and (max-width: 960px)
body {
    background: url(../image/footer-bg-900-Green.png) left bottom repeat-x;
}

当我使用chrome浏览器检查body元素时，该图像似乎可用。然后，我可以将鼠标悬停在CSS图片链接上，然后实际查看图片。直接链接也可以使用：http://www.binkfournituren.nl/catalog/view/theme/shoppest/image/footer-bg-900-Green.png

这一直有效，直到我们迁移到VPS环境。文件属性指示对该文件夹的读写访问。可以在以下浏览器中重现当前行为：


火狐浏览器
铬
IE浏览器9/10/11
苹果浏览器
小型平板电脑
Android设备


IE 8是否显示背景图像？

您是否对调整视口大小时为什么背景图像不可见有任何建议？

最佳答案

IE8不支持媒体查询。因此，浏览器将忽略它：

@media only screen and (max-width: 960px)
body {
    background: url(../image/footer-bg-900-Green.png) left bottom repeat-x;
}

关于css - CSS媒体正文背景图片不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22481164/