背景图片不会显示在手机浏览器上

Question

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

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

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

有什么想法吗？

Answer 1

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

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

希望能有所帮助。

Answer 2

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

Answer 3

现在，图片是否宽于1024px并不重要。导致我们没有显示背景图片的问题是：background-attachment: fixed;

在这种情况下，只需使用@media query

将此行更改为background-attachment: scroll;