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

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


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


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.


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.