"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 uls.

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.

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.

Comments

[tobiv]

HTML, CSS for background image?

[Vitaliy G.]

The CSS is 'html { background: url(../images/bg.jpg) no-repeat top right fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } '

[tobiv]

Just a few guesses: have you tried html { height: 100% }, or tried attaching the background to body instead of html?

[Vitaliy G.]

html { height: 100%} solved that, however a new problem arises—-now landscape mode is only half way covered. Feel free to take a look.. vitaliyg.com

[Vitaliy G.]

That covered the screen half way. The user above suggested using { height: 100% } on the html element. That seemed to solve that issue, but when the device is turned landscape, the screen is only half covered, showing white for the rest. Feel free to check out the problem live, if you can. Maybe that will be easier.

[Francis Kim]

I did try this on the live site, but I don't have a Galaxy S3. No luck with my suggestion?

[Vitaliy G.]

Unfortunately no. This is what I saw (this is from my desktop--strangely the original problem I was having could not be replicated on the desktop, even if same width/height was met) i.imgur.com/uZh9q.png

[Vitaliy G.]

Thanks again for your edited suggestion. I've tried changing max-width: 480px to 720px and added that code on the bottom of that media query. The background still does not cover, attaching itself to the bottom of the links. Not sure what I should be looking for.

[iforwms]

Finally, a problem someone else has spent hours trying to solve and I get the ready-discovered answer, makes a change! Thanks a lot, worked a charm.

[dhaupin]

Consider adding 100vh of height too: stackoverflow.com/a/38532368/2418655