Background acting wierd on android but not in browser


#1

I have the following css code:

.witzle-bg-image {
background-image: url('../img/home-bg.png');
background-attachment: fixed;
background-size: cover;
position: fixed;

}
and it does exactly what it should in google chrome, resizes so that the backgroudn image is always covering the screen, when i run it on my android though it starts repeating at the bottom. when i put no repeat there is just a blank white area, i thought background-size:cover was suppose to stop that?


#2

Hello,

I’ve got the same problem … did you find an issue ?


#3

Hummm …

I just find it :wink:

Replace this : background-image: url(’…/img/home-bg.png’);
for : background-image: url(‘file:///android_asset/www/img/home-bg.png’);

Its works for your Android mobile but not for the browser :wink:

CIAO


#4

I’m having the same issue with latest version of Ionic and Cordova.


#5

After various tests, I’ve found a solution that, at least in my case, works as expected:

.home {
    background: url('../img/background.png') no-repeat;
    position: absolute; 
    height: 100%; 
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover;
}

#6

I have come across the same issues when designing web sites and have noticed that there is not a lot of support for “background-attachment: fixed” in mobile browsers in general, which is why I had to abandon using it for websites. It might be the culprit here as well?