"background-size: cover" does not apply to mobile screen

Question

I have a background photo on my site using background-size:cover . It works for the most part, but leaves a strange ~ 30px empty space on my Galaxy S3 in portrait mode.

I attached a screenshot. The 1px teal line is designed to illustrate the entire screen. It seems that the background stops right after the ul s social networks.

I checked this by removing ul , and the background tied it to the bottom of the tag text.

Also, here is my mobile port related CSS:

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

Previously, this was not, but I probably accidentally listened to it, trying to solve another problem.

Answer 1

After several attempts at talking, adding min-height: 100%; to the bottom of the html under { background:... } , worked for me.

Answer 2

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

Just in case, in your head HTML, 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

The Galaxy S3 is wider than 480 pixels in portrait or landscape view, so I don't think these CSS rules will apply. You will need to use 720px.

Try adding:

 * { background:transparent } 

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

This way you can see if there is a movable footer or any other element that you created that interferes, blocking the view.

I would also try applying background CSS to the body, not HTML. I hope you come closer to the answer.

Answer 4

The current solution will be to use the viewport height (vh) to indicate the desired height. 100% does not work for Mobile Chrome. CSS:

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