How to insert background image in side-menu header?

Ionic Framework ionic-v3
1

Every time I add something in my side-menu toolbar it also changes header in all my pages.

.toolbar-background{
background-image: url(“http://www.planwallpaper.com/static/images/colorful-triangles- background_yB0qTG6.jpg”);
background-repeat: repeat;
}

How can I insert custom image in side-menu header and another image for any of my page headers?

2

hi there, any update on this ??

3

The simple way is…

<ion-menu persistent="true" [content]="content" type="overlay">
  <ion-header no-border>
    <ion-toolbar>
      <ion-title> <img src="assets/img/logo.png" class="logo-size" alt="logo"> </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>      
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class=“position_and_color” detail-none>
        <ion-icon [name]="p.icon" class=“position_and_size”></ion-icon>
        &nbsp; {{p.title}}
      </button>                 
      </ion-list>
  </ion-content>

  <ion-footer no-border>    
      <button class="btnsair" ion-item menuClose (click)="logout()" color="sair-btn" detail-none>
        <ion-icon name=“close” class="icone-white”></ion-icon>  
        &nbsp; SAIR
      </button>    
  </ion-footer>  

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Hope it could be helpful.

1 Like