在iPad和iPhone上不显示背景图像
我想创build一个背景覆盖在移动网页的部分，所以我使用了下面的CSS代码：
#section1{ background: url("background1.png") auto 749px; height: 749px; } 背景在Android（Chrome，Firefox …）上正确显示，但在iPhone或iPad（Safari，Chrome iOS …）上完全不显示。 我已经尝试使用jQuery在DOM准备好时设置这些属性，但没有运气。 我读过的大小可能是一个问题，但图像大约700kB（1124x749px），所以它应该完成Safari网页内容指南规则。 这是什么问题？
你的CSS规则有一个问题：
您使用background-size属性来自background-position -property 之后的简写符号， 它必须用/分开 。
你要做的是设置位置，但是它会失败，因为auto不是一个有效的值。
为了让它在速记符号中起作用，它看起来像这样：
background: url([URL]) 0 0 / auto 749px;
还要注意，有一个叫做cover的值，在这里可能是合适的和更灵活的：
background: url([URL]) 0 0 / cover;
在速记符号中对background-size的支持也不是很广泛，因为它支持Firefox 18 +，Chrome 21 +，IE9 +和Opera。 它在Safari中完全不受支持。 对此，我build议始终使用：
background: url("background1.png"); background-size: auto 749px; /* or cover */
这里有几个例子和演示，来演示这个行为。 你会看到Firefox例如显示除了第一个之外的所有图像。 另一方面，Safari只显示最后一个。
CSS
section { width: 200px; height: 100px; border: 1px solid grey; } #section1 { background: url(http://placehold.it/350x150) auto 100px; } #section2 { background: url(http://placehold.it/350x150) 0 0 / auto 100px; } #section3 { background: url(http://placehold.it/350x150) 0 0 / cover; } #section4 { background: url(http://placehold.it/350x150) 0 0; background-size: cover; }
演示
尝试购买之前
进一步阅读
MDN CSS参考“背景”
MDN CSS参考“background-size”
<“背景尺寸”>
请参阅背景大小 。 这个属性必须在background-position之后指定，用“/”字符分隔。
我希望这会帮助绝望的人。 就我而言，图像的大小太大了，所以iPad没有加载它（实际上是正确的）。
减小其尺寸和质量解决了加载问题。
当我试图正确使用背景时，问题没有解决。 它适用于我分裂背景属性：
#section1{ background: url("background1.png"); background-size: auto 749px; height: 749px; }
我的问题是，iOS不支持background-attachment: fixed 。 删除该行使图像显示。
它看起来像有一个固定的背景图像解决方法虽然： 如何复制在iOS上修复的背景附件
如果没有其他的工作，减less图像的大小 – iOS不喜欢在手机上的大图像大小，只是不会显示图像，如果它太大。
@insertusernamehere这个伟大的基础！ 不pipe我做了什么，我都无法让自己的形象出现…直到我回到基础。 图像尺寸太大，iPhone不喜欢加载超过700kbs的大小的图像。 所以，我把它缩小到了32kb，而且我们正在行动。
我有一个负面的文本缩进，扔掉我的背景图像的页面，所以颜色：透明的，然后。
我没有看到有人专门说这个，但你也必须定义宽度。 因为我把背景大小设置为“包含”，所以必须知道容器的尺寸是多less。
一旦我做了，背景呈现如预期。
@media only screen and (max-width:599px) { [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; } } @media only screen and (max-width:479px) { [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; } }
注意：需要为这两个断点定义后台URL，以便它适用于iPhone 5（iOS7）。
添加一个背景颜色解决了我的问题
background-color: #F4F4F2;