IONIC 5 ion header not transparent with a background image in ion-content

Question

I just created a blank project with ionic 5 and added a background image for the content. After that i modified the page.page.scss file to make the header transparent but it didn't work.

If i just pick a background color for the ion-content, that works.

Please help me.

Here is my environment :

Ionic:

   Ionic CLI                     : 6.11.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.7.0 (/usr/local/bin/node)
   npm    : 6.14.7
   OS     : macOS Catalina

Here is the page SCSS code :

  // ion-content {--background: #f1453d !important;
  //             --color : #f1453d !important }

  ion-content {
    --background : none;
    border:none;
    background-image: url(../../assets/imgs/bckgrnd.jpg) ;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size:cover;
    background-position:center bottom;
  }

  ion-toolbar {
    --background: transparent !important;
    --ion-color-base: transparent !important;
    --border-color: transparent;
    --background-color: transparent !important;
  }
}

HTML code :

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

And the result in image :

header white but not transparent...

So if someone has already had this issue or the solution, it would save me and my app from many many troubles.

thank you Bye

Answer 1

According to the ionic docs (https://ionicframework.com/docs/api/header), to make your header transparent you need the attributes mode and translucent set to ios and true respectively.

For example:

<ion-header mode="ios" translucent="true">
    <ion-toolbar>
        <ion-title size="large">My Navigation Bar</ion-title>
    </ion-toolbar>
</ion-header>

As the docs also mention this would not work if the device does not support backdrop-filter. Also you can do away with the html binding on translucent, unless you have a variable called "true" with the boolean value true.

If this does not workout, Try getting rid of the ion-header.

Answer 2

thank you for your help. I just succeed to make the header translucent but not transparent..arghh

In the CSS file i changed the --background feature of the content and added the mode="ios" attribute in my ion-header tag :

  ion-content {
    --background:url(../../assets/imgs/bckgrnd.jpg)  no-repeat 100% center/cover;
    border:none;
    //background-image: url(../../assets/imgs/bckgrnd.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size:cover;
    background-position:center bottom;
  
  }

<ion-header translucent="true" mode="ios">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

I don't know what i did wrong or if the ionic 5 has lost this feature... That would be weird and very bad... That's why i think i did something wrong...

Here is the picture : Header translucent , not transparent

Thank you again !

Answer 3

Follow the steps below to make header transparent

in variable.scss add

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

HTML Code

<ion-header class="ion-no-border">
  <ion-toolbar>
  </ion-toolbar>
</ion-header>
<ion-content >
   <div >
     <ion-img class="bgr" src="../../../assets/imgs/background_doodle.png"> 
     </ion-img> 
   </div>  
</ion-content>

in .scss add

.bgr {
        height: 100%;
        width: 100%;
        top: 0;
        position: fixed;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        object-fit: cover;
     }
        ::-webkit-scrollbar,
        *::-webkit-scrollbar {
        display: none;
     }

Answer 4

This is a very simple "one-liner" CSS solution to add a transparent (background) image to ionic 4+ content element without having troubles with transparent child elements, like text.

ion-content { 
  --background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
  url("assets/background_small.png") no-repeat center center / cover; 
}    

• --background: -- to manipulate CSS (shadow DOM) of web component
• linear-gradient(...): adds transparency to the image (0.2 in the actual example!)
• no-repeat center center / cover: stretches the image endless