Skip to main content

Forums

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

Viewing 15 posts - 1 through 15 (of 51 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: 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.

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

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

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

    #114509

    TheDoc
    Moderator

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

    #118676

    meerestier
    Member

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

    #119977

    this one works for me…it’s jquery, but oh well:

    http://srobbin.com/jquery-plugins/backstretch/

    #124371

    madman
    Member

    I was looking at a solutions for this as well…

    #129862

    I can get backgrounds to display correctly by combining background-size: cover with background-attachment: scroll.

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

You must be logged in to reply to this topic.

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