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 7 posts - 46 through 52 (of 52 total)
  • Author
    Posts
  • #235099
    maxelcat
    Participant

    Well, I have been a-searching on and off for hours on this. And finally I have got it working (though it does take a short while to catch up o the iPad I think I can cope with it)

    So thanks one and all and especially Mikkel

    #240669
    brainhappy
    Participant

    The solution is actually quite easy!

    View tutorial here: CSS background-size: cover – Making it work for mobile / iOS

    2 Media Queries and 2 images is all you need, very simple.

    #242919
    skobe
    Participant

    Thanks stacigh! That did the trick!

    #243905
    Dhaupin
    Participant

    It’s crazy how this is still a “bug” all these years later. There are some good ideas in this thread, but I didn’t want to use media queries, hacky overlays, or JS stuff. This is the only thing that worked for me: http://stackoverflow.com/a/38532368/2418655

    body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
    }
    html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
    }

    #254150
    sztojka
    Participant

    After tons of reading, the solution is quite simple: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483

    The secret is to make the element itself fixed and not the background image (because iOS uses the whole body height for fixed cover sized background images, and that is why they may seemed oddly stretched), and cover sizing is working like a charm then.

    Also don’t forget to use 100vh height, since full body stretching (top:0,bottom:0,left:0,right:0), would work strangely on mobile browsers thanks to the hiding and reappearing address bar.

    Here is the code if you don’t want to check out the original stackoverflow post:

    body:after{
          content:"";
          position:fixed; // stretch a fixed position to the whole screen
          top:0;
          height:100vh; // fix for mobile browser address bar appearing disappearing
          left:0;
          right:0;
          z-index:-1; // needed to keep in the background
          background: url(/img/header2.jpg) center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
    

    And if you want to test it live, I use it in production here: https://www.doklist.com/

    Hope it helps.

    #262400
    brandonmcconnell
    Participant

    @sztojka has the closest solution so far, but this will still cover the full size of the selected element, so even using height: 100vh, that element’s height will still visibly change if it is at the top when the user initially scrolls in Chrome or Safari on mobile, thereby cuasing the background size to increase.

    I have, however, found what I believe to be the correct method in resolving this issue (at least until mobile browsers provide their own workaround).

    Using a simple jQuery function, you can store the window’s width on page load, and use that to restrict the container’s resizing function to viewport sizes wider than the desktop breakpoint (992px+) and narrower viewports so long as the viewport width changes, not just the height. This way, on mobile and tablet devices, when you scroll, there is only a vertical viewport resize, so the resize function is not triggered.

    var breakpoint = 991;
    var bgHeight = function() {
        $('#bg').css('height', $(window).height() + 'px');
    }; bgHeight();
    var windowWidth = $(window).height();
    $(window).on('resize', function() {
        if ((($(this).width() <= breakpoint) && ($(this).width() != windowWidth))
            || ($(this).width() > breakpoint)) {
            bgHeight();
        }
        windowWidth = $(window).width();
    });
    

    CodePen: https://codepen.io/brandonmcconnell/pen/jayYbB

    #302267
    hc earwicker
    Participant

    Hi.
    @brandonmcconnell
    A few years ago now but any chance you could elucidate how to implement your solution on a WordPress site to someone in the self-taught hack category? e.g. where would you put that code: function.php, style.php etc?
    Can’t believe this problem existed the first place!
    Many thanks

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