This works perfectly across all desktop browsers (I even have a fix in place for IE7 and IE8) but pesky little iOS does not want to play nice. Instead of using the *viewport* height it uses the `body` height which, especially on a site that has infinite scroll, can get very long. This results in a completely distorted and unrecognizable background image.
What that page is doing is stretching the background image the entire length/width of the document, not of the screen size. So imagine if you had a blog with infinite scroll, the image would stretch and get blurrier as you added new posts to the page.
@TheDoc how about using a pseudo-element/fixed element that sits behind the content, and is the height of the viewport for iOS? That way you wouldn’t notice the stretched out image behind. It’s not ideal, but it should work fine.
Well, right now I’m essentially doing that except with an image.
I updated my 2nd comment as I’m now using *CSS-Only Technique #2* for iOS. The problem is that mobile Safari really doesn’t handle fixed elements very well. The issue comes into play when users zoom in/out of the page the `#bg` tries to resize itself.
I think it might just have to be something that I accept, I just don’t understand how nobody has a 100% working solution for it.
Ah, forgot about the fixed element weirdness on mobile devices.
Given that the screen size of iOS devices is fairly known (there aren’t that many variants), how about taking advantage of background-attachment: fixed;? You would probably need to resize the image for each different iOS device for that to work though.