“background-size: cover” does not cover mobile screen

Question

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 screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media ul s.

I tested this by removing the ul and the background attached it self to the bottom of the tagline text.

Also, here's my CSS pertaining mobile portait view:

@media only screen and (max-width: 480px) {

.logo {
    position: relative;
    background-size:70%;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    margin-top: 30px;
}   

h1 {
    margin-top: -25px;
    font-size: 21px;
    line-height: 21px;
    margin-bottom: 15px;
}

h2 {
    font-size: 35px;
    line-height: 35px;
}

.footer_mobile {
    display: block;
    margin-top: 20px;
    margin-bottom: 0px;
}

li {
    display: block;
    font-size: 1.3em;
}

This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.

Answer 1

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

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

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

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