background-size: cover not working in portrait on Android tablet

Question

I'm using the background-size property for a full width and height background image but having trouble getting it to fully cover in Chrome on a Nexus7 tablet in portrait view. It only covers the width and not the height i.e. there is about 200px of white space below it. However when I view the site in desktop Chrome (or anything else) and on a vertical monitor to emulate portrait dimensions it covers no problem.

Anyone have a solution?

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
}

Portrait screen shot:

Solution 1

I believe you can fix it by defining the height of the html and body tags in the CSS, like so:

html{
 height:100%;
 min-height:100%;
 }
body{
 min-height:100%;
 }

hope this helps

Solution 2

I know it's been a long time since the question was asked, but I just found the answer I think. For me background-size:cover works in Android Browser and Android Chrome if you omit the "fixed" in the background CSS instruction. After some tests, it works for me making the image the background of a DIV:

#yourDivSelectorHere { 
width: 100%;
height: 100%;  
position: fixed;
top: 0;
left: 0;
z-index: 0; 
background-image: url(/img/backgrounds/1.jpg) ;
background-repeat:no-repeat;
background-position: center center;
/* background-attachment: fixed; removed for Android */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

The DIV is itself fixed in position (as opposed to the background image), is 100% width and height, and is placed at the back of everything. It's a little extra effort as opposed to just adding the background image to HTML or BODY, but for me it works on all browsers I've tested so far (FF, Chrome, IE8, IE9, Safari), on iPad2 and Android Chrome and Android Browser.

Solution 3

I'll provide the solution I found in case someone runs into this in the future. Instead of using a background image, I used an <img>:

HTML :

<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS :

#full_bg {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #full_bg {
        left: 50%;
        margin-left: -512px;
    }
}

This worked cross-browser and on mobile devices. I found the solution here.

Solution 4

Well, I can come up with another solution: I added it to the body and all you need to take care of is, that the background-attachment:fixed is the last rule:

works:

body {
        height:100%;
        width:100%;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center center;
        background-attachment:fixed;
}

works not:

body {
            height:100%;
            width:100%;
            background-size:cover;
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-position: center center;
}

It is really a pitty, that the phonebrowsers are, in general, a little bit buggy ...

Solution 5

Use HTML background instead of body and give a 'height:100%'

html {
    height:100%;
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

View more solutions

Comments

[Raj]

Great timing! This worked for me and should be the accepted answer IMO!

[Morg.]

The thing is background-size can do much more than cover, and that's where it doesn't work.

[Darren Cook]

Can you explain more what page-content-element and page content height are? I.e. can you show a fuller example?

[Rufflewind]

Note that in my case, I only needed either height or min-height of html and nothing else.

[Tallboy]

Damn!! I searched forever for this. Do you know why fixed is required? I checked on this forever.

[BastianBalthasarBux]

No, I have no clue why this is. I think it is simply a bug, as it also only works if it is the last rule, which makes technically no sense for me ...