背景图像不会显示在手机浏览器上答案

【问题标题】：background-image won't show on phone browser背景图像不会显示在手机浏览器上
【发布时间】：2013-02-23 19:26:39
【问题描述】：

我有以下 CSS 以便在我的页面背景上获取图像，并在其周围设置颜色。

#home{text-align:center;background:Red url('/Content/image.png') no-repeat fixed center;}

当我使用任何浏览器（我更喜欢 Chrome）在我的计算机上运行它时，一切都很好。但是，当我在手机上（也使用 Chrome）打开网站时，我只看到背景颜色，而不是图像。但是，只要我移除中心部分（背景位置），我就可以看到它。

有什么想法吗？

【问题讨论】：

【解决方案1】：

经过一番搜索，我发现宽度超过 1024 像素的图像不会在 iDevices 上显示。我使用媒体查询来更改背景，如下所示：

@media all and (max-width:900px), (max-device-width:900px){
body{
background-image: url('smaller-image.gif');
}
}

希望对某人有所帮助。

【讨论】：

我一直在搞乱我的 CSS 几个小时，现在试图让背景图像显示在 iOS7 或更旧的设备上，但没有运气。我将图像宽度更改为 1024 像素（从 3000 像素开始），现在它可以工作了。非常感谢！

【解决方案2】：

我遇到了同样的问题，然后我申请了background:url("../img/pic1.jpg") no-repeat center;，如果你在 ios 中遇到问题，你可以试试。

【讨论】：

【解决方案3】：

如今，图片是否宽于 1024 像素并不重要。对我来说导致不显示背景图像的问题是：background-attachment: fixed;

在这种情况下，只需将此行更改为 background-attachment: scroll; 并使用 @media 查询

【讨论】：