One page sites pretty popular on the web and they work great for scrolling on mobile. Full page backgrounds can also look pretty cool. Unfortunately background-size:cover and background-attachment: fixed don’t really work on ios (safari, chrome, anything on an iphone really)! You often get a really stretched out image or no image shows at all!
I created a few one page sites recently and couldn’t get it to work. I realise now that my problem was background-attachment:fixed. The solution is to actually make the div fixed and not use background-attachment at all. This solution only needs CSS.
Here’s an example:
Notice the empty div with the class ‘bkgdImage’? That’s the key. Don’t put the background image on the body. You could put the background image on the body. And make the body fixed as is done here. But this way seems to be easier.
z-index: -100; (so it's behind your content)
background: url(../yourimage.jpg) center center no-repeat;
Voilà. If you want to see it in action check out my portfolio site: Goodlooking.co.nz
I’ve tested this on safari and chrome on my iPhone 5 and on chrome on my samsung. It works! Let me know if you have any problems in the comments.