ion-navbar背景图片不显示-仅显示白色-Ionic 3

Question

I have an ion-header section like this:

<ion-header (swipeRight)="toProfile()">
  <ion-navbar #clickme class="itemadspace" [@slideDown]="downState" no-lines no-padding>
    <h3 class="feedtitle">Stylist Feed</h3>
    <div (tap)="loadPost()" class='pluscontainer'>
      <ion-icon class='plussy' name="add"></ion-icon>
    </div>
  </ion-navbar>

  ...

</ion-header>

The CSS for ion-navbar is the itemadspace class is:

    .itemadspace {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        background-image: url('../../assets/tresemme.png');
        background-repeat: no-repeat;
        background-size:cover;
        text-align: center;
    }

No image shows, the background for the ion-navbar component is white. Any idea how to get the background image to work?

Answer 1

INstead of adding as class. you can overwrite the theme. You can add this code in variable.scss at bottom.

ion-header{
    ion-navbar{
        div.toolbar-background{
             background-image: url('../../assets/tresemme.png');
             background-repeat: no-repeat;
             background-size:cover;
             text-align: center;
        }
    }
}