CSS background-image not working properly on android mobile

Question

This is the code I am using at the moment:

background: url(myimage.jpg) no-repeat center center fixed;
background-size:100% 100%!important;
background-position:0 0!important;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size:cover;
background-attachment:scroll;

On android I browsed with Chrome. When I scroll down I want the background image to be static. Can I achieve this in some other way?

Answer 1

Unfortunately not, this seems to be a bug which Google has never fixed.

I personally dealt with exactly the same issue last week and ended up giving up on looking for a solution.

The bug submission

For the record, it is also not posible on Safari on iOS.

Answer 2

Thanks to nullptr there is a fix in the bug report that works. On the post #23 by using the overflow-y property like that :

html, body {
    height: 100%;
}
html {
    overflow-y: hidden;
}
body {
    overflow-y: scroll;
}
body {
    background: url(myimage.jpg) no-repeat center fixed;
    background-size: cover;
}

if you wish to apply the background image on an other element instead of the body just make sure the parent contains the overflow-y property to hidden and the element to scroll.

Answer 3

Try this. Worked for me after several trial and errors.

html {
background-image:url('myimage.jpg');
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%; 
overflow: hidden;
}

body {           
height:100%;
overflow: scroll;
}