Side Menu Background Image Not Working on Actual Device

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)


I have already tried searching the web for solutions but it all didn’t work.

Here is my code:

HTML Component

      <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>{{}}</h2>
        <p ion-text header-subtitle>{{}}</p>
      <ion-list no-margin no-lines>
        <button menuClose ion-item item-title main-menu *ngFor="let p of pages" (click)="openPage(p.theme)" []="checkActivePage(p.theme)">
          <ion-icon icon-medium item-left>
            <ion-icon name="{{p.icon}}"></ion-icon>

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 :blush:

1 Like

have you try url path direct from assets ?
background: url('assets/images/background/3.jpg');

1 Like

Yeah but unfortunately, it didn’t work either :cry:

can you find which path apply when you debug app in mobile device ?

1 Like

I am not sure if I get your question right but based on my understanding, you are asking for the file path of the image when the application was opened on a device.

Here it is :

When url is /assets/images/background/3.jpg

When url is assets/images/background/3.jpg



1 Like

then this will work
background: url('../assets/images/background/3.jpg');

1 Like

Nice. Thank you so much. It works now :heart_eyes:

1 Like