Side Menu Background Image Not Working on Actual Device

@OliverPrimo wrote:

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:

screenshot_1507×900 33.9 KB

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)

image432×880 61.9 KB

Device

lending720×1280 52.6 KB

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