I use ionic 8 with angular 18 and I want the header and footer to be transparent and show ion-content background-image in fullscreen mode, behind them.

I use the below code:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title style="--opacity:1">
      Main
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="main ion-padding" [fullscreen]="true">
  <p></p>
</ion-content>

<ion-footer [translucent]="true">
  <ion-toolbar>
    <ion-item>
      <ion-img slot="end" id="logo" src="/assets/images/logo.svg"></ion-img>
    </ion-item>
    <ion-item>
      <ion-note slot="end" color="light">
          title
     </ion-note>
    </ion-item>
    <ion-row class="ion-justify-content-center">
      <ion-button style="--opacity:1">submit</ion-button>
    </ion-row>
  </ion-toolbar>
</ion-footer>

and in SCSS file:

ion-content.main {
    --background: url('/assets/images/landing.png') center/cover;
}

#logo {
    width: 25%;
}

but, it is not shown properly: