How to put image in both <ion-header> and <ion-content> in Ionic

user_6054042 0
Viewed 1050

I'm currently developing Ionic app and stuck at implementing image in both ion-header and ion-content.

Here's screenshot how I implemented. As you can see from screenshot, ion header and ion-content contents are hidden because I set image z-index to high number;

enter image description here

Could anyone please suggest how to achieve this? Thanks.

ionic5 ionic-framework angular css
1 Answers

There's an easier way to do that, and it's by using the fullscreen property from the ion-content component (docs). So the trick is to make the content to be fullscreen and then to set the background of the header to be transparent so that it doesn't cover the background.

Template:

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" fullscreen>
  ...
  ...
</ion-content>

Styles:

ion-toolbar {
  --ion-toolbar-background: transparent;
}

ion-content {
  --background: url('/assets/your_image.jpg') no-repeat center center / cover;
}

Important: There's currently an issue that makes the backgroung image to flicker in some specific scenarios (Github issue). If this issue affects your app, the recommended workaround is to set the background in the component instead of by using css like this:

Template:

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<!-- The only change is the id added to the ion-content -->
<ion-content id="my-page-content" class="ion-padding" fullscreen>
  ...
  ...
</ion-content>

Styles:

ion-toolbar {
  --ion-toolbar-background: transparent;
}

ion-content {
  // Do not set the background here!
}

Component:

import { DomController } from '@ionic/angular';

// ...

@Component({...})
export class MyPage { 

  constructor(private domController: DomController) {}

  // ...

  ionViewWillEnter() {
    this.initializeBackground();
  }

  // ...

  private initializeBackground(): void {
    try {
      const content = document.querySelector('#my-page-content');
      const innerScroll = content.shadowRoot.querySelector('.inner-scroll');

      this.domController.write(() => {
        innerScroll.setAttribute(
          'style',
          'background: url("/assets/img/your_image.jpg") no-repeat center center / cover',
        );
      });
    } catch (e) {}
  }
}
user_39154380
Related