Skip to main content

Forums

This topic contains 50 replies, has 37 voices, and was last updated by  brandonmcconnell 1 year, 11 months ago.

Viewing 15 posts - 1 through 15 (of 56 total)
  • Author
    Posts
  • #40566

    TheDoc
    Moderator

    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: https://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.

    #113145

    TheDoc
    Moderator

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

    #114490

    TheDoc
    Moderator

    Any love here?

    #114494

    chrisburton
    Participant

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

    #114495

    TheDoc
    Moderator

    I haven’t – a great idea.

    #114496

    chrisburton
    Participant

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

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

    #114501

    TheDoc
    Moderator

    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.

    #114497

    chrisburton
    Participant

    Bummer.

    #114498

    This reply has been reported for inappropriate content.

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

    #114505

    TheDoc
    Moderator

    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.

    #114506

    chrisburton
    Participant

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

    #114508

    This reply has been reported for inappropriate content.

    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.

    #114509

    TheDoc
    Moderator

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

    #114511

    This reply has been reported for inappropriate content.

    Haha, good luck!

    #118676

    meerestier
    Member

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

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star