background-size:cover leaves blank space in Chrome for Android

Asked 5/12, 2012 at 10:20 Answered 12/7, 2016 at 10:46

I'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.

Link : http://test.socie.nl

CSS :

body {
    background: url(../../images/background/image1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Unexpected result :

Rolanda answered 5/12, 2012 at 10:20 Comment(2)

This is a long shot, but try adding it to the html element instead of the body and see if that helps. – Doykos 5/12, 2012 at 10:34

It works perfectly on an Android 4.3 phone using Chrome – Honaker 8/11, 2013 at 10:46

It appears to be a four year old bug that the Android/Chrome team are ignoring:

https://code.google.com/p/android/issues/detail?id=3301

http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo

I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.

The one I am going with is:

.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
    }

(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:

<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>

(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)

Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!

Multivibrator answered 8/11, 2013 at 10:41 Comment(2)

Are you saying content inside of .ftpush fixes it? because that CSS doesn't work on tablet in portrait mode. – Salmi 2/4, 2014 at 0:32

@Salmi That solution is just the best of the bunch. However, testing on a Nexus 7, running Android 4.4, it is working well in both portrait and landscape. I also just did a quick test on Android 2.3, stock browser, and it actually works reasonably well in portrait (just a bit clunky when scrolling), but landscape is wrong (in the way the OP shows). – Multivibrator 2/4, 2014 at 0:56

There is update to the method posted above (as published here).

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

Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:

html {
    width: 100%;
    height: 100%
}

Totem answered 25/10, 2014 at 18:25 Comment(0)

Solved by adding the following:

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

body {
   min-height:100%;
}

Gaffe answered 1/2, 2015 at 16:6 Comment(0)

Instead of a background image, try using an <img> instead:

HTML :

<img src="imagepath" id="your-id" />

CSS :

#your-id{
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}

Paraph answered 5/12, 2012 at 10:39 Comment(1)

This was one of many fixes I've tried. On Android 4.3 Chrome 30, it actually works in landscape mode. In portrait it had the same problems as using background-size:cover (actually slightly worse as it sometimes didn't keep up when scrolling). BTW, on Android 2.3 (native browser) this solution was the worst of the bunch. – Multivibrator 8/11, 2013 at 10:34

Actually ALL I needed if your using html tag is to add:

height: 100%;

...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.

Suppose answered 12/7, 2016 at 10:46 Comment(0)

Recommended topics

Hot tags