Background image not working on IOS in ionic 3

Ionic Framework ionic-v3
1

hello
i used background image in ion content

 <ion-content padding class="getstart">
  
</ion-content>

this is scss file

.getstart{
  background-image: url('../assets/icon/avatar04.png') !important;
  background-repeat: no-repeat !important;
background-size:cover !important;
width:100% !important; height:100% !important;

}

the background show in web and android but not showing in IOS
i tried it in iphone 6s with system ios 10

2

.homeBg{
background-image:url(‘…/assets/img/home-page-bg.jpg’);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #45372E;
}

It works for me in web android ios.

4 Likes
3

@alibahjat I’m assuming this scss is in app.scss. Your scss file looks fine. Run into a similar issue the other day. In my case the dimensions of the background image was too large. Had to scale it down for it to work.

Here’s a post that I found very useful regarding the dimensions - http://stackoverflow.com/questions/38250333/ios-preparing-background-images-for-applications

Hope this helps solve your problem.

1 Like