I’m putting this here for my own sanity. If I had £1 for every time I’ve tried to solve this issue!
The goal here is to have a background image that covers the whole of the browser window. Ideally we want it to scale, stay centred, and keep it’s correct proportions.
My go-to article on this is Chris Coyier’s Perfect Full Page Background Images. I was trying the “Awesome, Easy, Progressive CSS3 Way”, but was having difficulty on IOS.
A bit more Googling brought me back to CSS-Tricks and to this thread where a solution is posted by k00ka. Here’s the CSS:
background: url(‘http://placebear.com/1200/800’) no-repeat center center fixed;