Grow your CSS skills. Land your dream job.

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

  • # January 3, 2013 at 3:46 am

    I have the same problem! So annoying

    # January 6, 2013 at 3:44 am

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

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

    # February 13, 2013 at 4:44 am

    I was looking at a solutions for this as well…

    # February 13, 2013 at 10:08 am

    I tried using it for my current project. I didn’t like how it blew it up on larger screens and much smaller on smaller screens. I opted for just using individual images.

    # March 27, 2013 at 8:27 am

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

    # March 28, 2013 at 8:24 pm

    I manage to get it working like this:

    http://codepen.io/anon/pen/sGvxe

    Or at least, I think I did — I only have my iPhone today. My iPads are home.
    Anyway, hope it helps.

    # May 3, 2013 at 3:52 pm

    I followed @macnimble‘s excellent suggestion, but was disappointed by the way scrolling works.
    Here’s a fix:

    html {
    background: url(http://placebear.com/1200/800) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
    }
    body
    {
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    }

    Works on iOS 5+.

    # May 9, 2013 at 11:23 pm

    This is almost perfect. The only problems that I’ve encountered are:

    - Touching the menu bar at the top doesn’t scroll to the top of the page (presumably because Safari thinks the HTML view hasn’t ‘moved’ at all).
    - If you scroll up when at the top of the page so that Safari itself moves and then try to scroll down by touching near the bottom of Safari, the content doesn’t scroll. I don’t encounter this issue unless scrolling up while already at the top of the page and, even when I do encounter it, the content still scrolls if I scroll by touching near the middle of the screen.

    So two issues, neither of which seem like deal breakers to me. Thank you so much for solving this!

    # July 11, 2013 at 12:45 pm

    Yes, I’m with @pyrmont on this. Thank you so much for solving this :)

    # August 29, 2013 at 6:53 am

    I know the topic is iOS but just wanted to point out that those solutions properly break on Android 2.3.5. I can’t even scroll down to see the whole content

    # September 25, 2013 at 1:46 pm

    Really unbelievable how little there is on this out in the wild. This worked great for me. Thanks for sharing.

    # November 9, 2013 at 2:35 am

    Hi Guys,

    I tried k00ka on my site, but it didn’t seem to work properly.

    I have it working in Chrome and Safari (desktop versions), but the entire page scrolls in Safari for iOS.

    The thing i want to accomplish is: the “background image” and the “background image of the article” should stay fixed, creating a iOS 7 blur finish.

    The article itself (text, shadows etc) should scroll.

    How can i accomplish this? Do i need to put the boxed blurred .jpg

    # January 27, 2014 at 8:13 am

    I’m still frustrated with background-cover. It has so much promise, but has inconsistent support. This is my alternative.
    Markup:
    <div class="background-div"><img src="background.jpg"></div>
    CSS:
    .background-div {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    }
    .background-div img {
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    }

    # January 27, 2014 at 8:15 am

    Please don’t restart solved threads.

    Post a new subject with appropriate Codepen examples etc.

    http://css-tricks.com/how-to-ask-a-good-question-in-the-forums/

    # March 31, 2014 at 5:21 am

    I know this is an old thread, but I found that when using

    box-sizing: border-box
    

    I was having this same issues in iOS, with background-attachment: fixed; stretching to the entire viewport. Using the default

    box-sizing: content-box
    

    seemed to fixed the problem for me. Can anyone else confirm this behaviour?

Viewing 15 posts - 16 through 30 (of 30 total)

You must be logged in to reply to this topic.

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