iphone - background-image won't show on phone browser

Question

I have the following CSS in order to get an image on my page background, and a color around it.

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

When I run it on my computer with any browser (I prefer Chrome), everything is fine. However, when I open the website on my phone (also using Chrome), I only see the background color, not the image. However, as soon as I remove the center part (background position), I can see it.

Any idea?

Answer 1

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

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

希望对某人有所帮助。

Answer 2

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

在这种情况下，只需将此行更改为background-attachment: scroll;with @media query

Answer 3

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