why does CSS background-size: cover not work in portrait mode on iOS?

Question

I\'m trying to set up a manualy splash-image across devices. I\'m doing so by checking for orientation (touch devices) or screen width vs. sc

Answer 1

As far as I'm aware, this method works on all IOS devices. Depending on your other page elements (header etc) you may need to adjust z-index for the &:before psuedo-element.

html {
    height:100% !important;
}

body {
    height:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    // use your own class here //
    &.body-class { 
        // @screen-xs-max is a Bootstrap3 variable name //
        @media screen and (max-width:@screen-xs-max) {
            min-height:100vh;
            position:relative;
            &:before {
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                display:block;
                content:"";
                z-index:-1;
                background-image:url(background-image.jpg);
                background-position:center;
                background-size:cover;
                // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes //
                -webkit-background-size:cover;
            }
        }
    }
}