CSS code acting weird in phone but not in browser

Question

CSS code acting weird in phone but not in browser

I'm using the Ionic framework and 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: it resizes so that the background 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 supposed to stop that.

html
css
html5
ionic-framework

Answer 1

I had a similar issue and I think you also facing the same. You need to put this class to the ion-content rather than ion-view. If you doing the same then we have hit the jackpot.

Code snippet:

.scroll-content{
  background-image: url('http://www.jimatkinsonwebdesign.co.uk/wp-content/uploads/2012/03/google-chrome.jpg');
  background-attachment: fixed;
  background-size: cover;
  position: fixed;
}

The codepen link is attached. Hope it helps!!