background-size: cover not working in portrait on Android tablet
AndroidCssGoogle ChromeCoverBackground SizeAndroid Problem Overview
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:
Android Solutions
Solution 1 - Android
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 - Android
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 - Android
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 - Android
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 - Android
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;
}
Solution 6 - Android
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