"background-size: Cover" Does Not Cover Mobile Screen

I have a photo background on my site using background-size:cover. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode. I've attached a

Solution 1:

After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.

Solution 2:

This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.

Just in case, in your HTML head, something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML:

<div class="html-mobile-background"></div>

CSS:

html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}

Solution 3:

Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.

Try add:

* { background:transparent }

right at the end & move your html { background:... } CSS after that.

This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.

Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.

Solution 4:

Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:

background-size: cover;
min-height: 100%;