Grow your CSS skills. Land your dream job.

[Solved] Full Page Backgrounds on iOS (background-size: cover)

  • # November 1, 2012 at 5:02 pm

    I must be going crazy here. I don’t understand how my searches for a solution to this come up empty. It only means that I’m doing something completely wrong or nobody cares about the issue.

    I’m using `background-size: cover;` to create a full-page background image on the body. More info on that, if you’re interested, can be found here: http://css-tricks.com/perfect-full-page-background-image/

    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.

    Codepen: http://codepen.io/ggilmore/full/whbzg

    Open that up on your desktop to see how it should function, then open it up on an iPhone/iPad to see where it all falls apart.

    Any advice would be greatly appreciated.

    # November 1, 2012 at 8:01 pm

    For now I’m using **CSS-Only Technique #2** for iOS.

    # November 15, 2012 at 7:52 pm

    Any love here?

    # November 15, 2012 at 7:56 pm

    @TheDoc I tried relentlessly when you posted this and found no solution. Have you tried posting on Stack Overflow?

    # November 15, 2012 at 7:57 pm

    I haven’t – a great idea.

    # November 15, 2012 at 8:00 pm

    @TheDoc check this page out and see if you can figure it out. It works on iOS.

    http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php#

    # November 15, 2012 at 8:04 pm

    It works, but not like it should.

    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.

    # November 15, 2012 at 8:05 pm

    Bummer.

    # November 15, 2012 at 8:06 pm

    @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.

    # November 15, 2012 at 8:13 pm

    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.

    # November 15, 2012 at 8:15 pm

    @TheDoc I doubt she’ll know but ask @sazzy on Twitter. This would be a great article for @chriscoyier to blog about.

    # November 15, 2012 at 8:33 pm

    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.

    # November 15, 2012 at 8:37 pm

    One more kicker: the image being used can have any dimension as it will be user-uploaded.

    # November 15, 2012 at 9:17 pm

    Haha, good luck!

    # December 22, 2012 at 8:22 pm

    Did anybody find a clean solution for this? I was digging through piles of Google Search results…

Viewing 15 posts - 1 through 15 (of 40 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".