How to make a fully responsive background image that works even in iPhone Safari?

Question

I tried different methods, mostly people suggest to use img instead of a background-image to get the perfect result, but I was wondering is it possible to fix this with just some tricks and have a full-width background image?

Here's my live website that I have problem with

Answer 1

Since you do not need the img to fill the page vertically and I think that you want the whole image to fit horizontally this is how I would do it.

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%;
}

see fiddle http://jsfiddle.net/DIRTY_SMITH/x131ofex/3/