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

background fullscreen css cover
Jurgen picture Jurgen · Dec 5, 2012 · Viewed 8.1k times · Source

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 :

Answer

Darren Cook picture Darren Cook · Nov 8, 2013

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?!

Related questions

Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
How do I run a node.js app as a background service?

Since this post has gotten a lot of attention over the years, I've listed the top solutions per platform at the bottom of this post. Original post: I want my node.js server to run in the background, i.e.: …

Read More