Good Day Everyone,
I have an Ionic 3 application which has a side menu that consists of a header and a list of menu under the header. I would like to create something like this:
The problem is that when I set a background image, it only works on the browser but when I tried the application on an actual device, it doesn’t display the background image
Browser (ionic serve)
Device
I have already tried searching the web for solutions but it all didn’t work.
- https://stackoverflow.com/questions/29660016/ionic-background-image-not-showing-on-device
- https://stackoverflow.com/questions/47414314/ionic-background-image-not-showing-with-apk
- https://stackoverflow.com/questions/45050319/ionic-3-angular-background-image-not-appearing
Here is my code:
HTML Component
<ion-content>
<div header-background-image padding>
<img menuClose [src]="domSanitizer.bypassSecurityTrustUrl(params.image)" (click)="openPage('My Profile')">
<h2 ion-text color="light" header-title text-capitalize>{{params.name}}</h2>
<p ion-text header-subtitle>{{params.email}}</p>
</div>
<ion-list no-margin no-lines>
<button menuClose ion-item item-title main-menu *ngFor="let p of pages" (click)="openPage(p.theme)" [class.active]="checkActivePage(p.theme)">
<ion-icon icon-medium item-left>
<ion-icon name="{{p.icon}}"></ion-icon>
</ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
Style Component
[header-background-image] {
height: auto;
position: relative;
background: url('/assets/images/background/3.jpg');
background-size: 100%;
background-position: center bottom;
}
I hope someone can help me with this. Thank you in advance 
