CSS背景图片未在移动设备上显示

Question

我已经在CSSpress网站上几页的横幅部分使用CSS添加了背景图片，并且使用自动前缀可以在Chrome / Safari / IE / Firefox的桌面上正常工作。出于某种原因，在移动浏览器上（我已经在iPhone上的Chrome和Safari上进行了测试），一些横幅图像可以正确显示，而其他则不能。

.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}

左边的图像是正确显示背景图像的页面，而右边的图像是没有显示页面的页面。两者都具有与使用的图像完全相同的css：

更新： 在听取了一些建议之后，我尝试调整一些图像的大小，以查看它们是否适用于移动设备上的Chrome / Safari：

如您所见，调整大小后的图像在我的iPhone上的Chrome和Safari上都能正常工作。Apple的IOS文档建议最大尺寸为1024px，但1400px对我来说很好（尽管我确实必须删除手机上Safari设置中的cookie和数据）

Answer 1

那么，这两个图像之间还有哪些其他区别？主要与像素大小有关。

移动Safari有一个像素阈值，实际上与图像的kb大小无关，但与像素数量无关。未显示的图像尺寸是多少？它们比实际的更长或更高吗？

这是Safari Web内容指南的链接。向下滚动到iOS的已知资源限制，看看您是否属于这些类别中的任何一个！