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:

Vidavidal

Answer 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%;
}

Kerch

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

Answer 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.

Speck

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

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

Answer 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.

Vidavidal

Answer 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 ...

Laden

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

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 ... – Laden

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

Fixed

Answer 6

I have found out another solutions using a bit jquery stuff. The fix is based on an assumption that we are using a image in landscape dimension/proportion for the background.

step1: compare the "window height" and "page content height"

step2: if "window height" is less than "page content height"

step3: Apply this to body tag

HTML {

<body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

script

var wHeight = $(window).height();
    var bodyHeight = $('page-content-element').height();
    if(wHeight < bodyHeight){
        $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;');
    }
    else{
        $('body').removeAttr('style');
    }

call this on page load and window resize

Corrody

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