19

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.

problem screenshot

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.

JSW189
  • 6,267
  • 11
  • 44
  • 72
Vitaliy G.
  • 851
  • 1
  • 7
  • 20
  • 1
    HTML, CSS for background image? – tobiv Dec 01 '12 at 12:02
  • 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; } ' – Vitaliy G. Dec 01 '12 at 12:03
  • 1
    Just a few guesses: have you tried `html { height: 100% }`, or tried attaching the background to `body` instead of `html`? – tobiv Dec 01 '12 at 12:09
  • html { height: 100%} solved that, however a new problem arises—-now landscape mode is only half way covered. Feel free to take a look.. http://vitaliyg.com – Vitaliy G. Dec 01 '12 at 12:14

4 Answers4

40

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

Vitaliy G.
  • 851
  • 1
  • 7
  • 20
  • 4
    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. – iforwms Jun 10 '15 at 10:57
  • 2
    Consider adding `100vh` of height too: http://stackoverflow.com/a/38532368/2418655 – dhaupin Jul 22 '16 at 17:48
5

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;
    }
}
Modular
  • 6,440
  • 2
  • 35
  • 38
1

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.

Francis Kim
  • 4,235
  • 4
  • 36
  • 51
  • 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. – Vitaliy G. Dec 01 '12 at 12:19
  • 1
    I did try this on the live site, but I don't have a Galaxy S3. No luck with my suggestion? – Francis Kim Dec 01 '12 at 12:20
  • 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) http://i.imgur.com/uZh9q.png – Vitaliy G. Dec 01 '12 at 12:25
  • 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. – Vitaliy G. Dec 01 '12 at 19:28
0

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%;
Mika Vatanen
  • 3,782
  • 1
  • 28
  • 33