Vitaliy G. Vitaliy G. - 5 months ago 27
CSS Question

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

I have a photo background on my site using

. 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

I tested this by removing the
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;
-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.


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