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