如何制作一个即使在iPhone Safari中也能正常工作的全响应式背景图像？

Question

我尝试了不同的方法，大多数人建议使用img而不是background-image来获得完美的结果，但我想知道是否可以通过一些技巧来修复这个问题，并有一个全宽的背景图像？

Here's my live website that I have problem with

Answer 1

由于您不需要img来垂直填充页面，并且我认为您希望整个图像适合水平方向，这就是我所做的。

body { 
  background: url(http://lorempixel.com/400/200/sports/) no-repeat center center fixed; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

请参阅fiddle http://jsfiddle.net/DIRTY_SMITH/x131ofex/3/