Ionic 4 - Header background image

Ionic Framework
2

In case someone encounters the same problem:

I found a somewhat hacky solution that works. The problem why whe can’t use css to style the header anymore is that ionic 4 encapsulates it inside a web component. Web components are meant to be uneffected by outside css.

Luckily we can absuse the color variables in “theme/variables.scss” to insert an image into the header. Because it’s content is direcly used as value for the css background property it is possible to do something like this:

--ion-color-medium: url("assets/custom-image.jpg") center / 100%;

<ion-header>
  <ion-toolbar color="medium">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>
1 Like