Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

Viewing 15 posts - 16 through 30 (of 52 total)
  • Author
    Posts
  • #130095
    MacNimble
    Member

    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.

    #134002
    k00ka
    Member

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

    #134638
    pyrmont
    Member

    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!

    #142320
    jetbalagtas
    Member

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

    #148494
    emma
    Participant

    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

    #151222
    Scout
    Participant

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

    #155521
    [email protected]
    Participant

    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

    #161207
    photocurio
    Participant

    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%;
    }

    #161208
    Paulie_D
    Member

    Please don’t restart solved threads.

    Post a new subject with appropriate Codepen examples etc.

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

    #167188
    mortocks
    Participant

    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?

    #169444
    terraling
    Participant

    @photocurio – I think you meant position:fixed not position:absolute for .background-div otherwise it scrolls with the rest of the content.

    Also, I’m not sure you even need that img, you can use a background-image with cover on your div.background-div. Cover works because you’ve solved the problem of the size of the container being the display viewport not the size of the whole page including off-screen content.

    #171187
    mqn
    Participant

    I too am looking for a solution..

    http://www.qndesign.com

    does not work on ipad or phone..any suggestions besides scrapping it all?

    #171188
    nixnerd
    Participant

    Ahhh! You found it! Let’s see if @TheDoc has any more suggestions on this or if it was ever figured out.

    It’s marked [Solved] is it not?

    #171194
    mqn
    Participant

    Hi sorry,
    This thread seems to have been solved can someone tell me what I’m doing wrong.. I did @k00ka solve but it does not seem to be working..only applied to first image, the rest are original code. Can someone tell me what I”m doing wrong? its fine on the desketop but not on phone or ipads.

    http://www.qndesign.com

    sorry i’m a self taught hack. : (

    #171195
    nixnerd
    Participant

    sorry i’m a self taught hack. : (

    We all are ;)

    Hey, there’s no telling if @k00ka is still around here. Maybe… maybe not. People leave all the time. Is there any way you could create a Codepen for this so we can all play with it? Thanks!!!

Viewing 15 posts - 16 through 30 (of 52 total)
  • The forum ‘CSS’ is closed to new topics and replies.