title: IONIC 5 ion header not transparent with a background image in ion-content
body: <p>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.</p>
  <p>If i just pick a background color for the ion-content, that works.</p>
  <p>Please help me.</p>
  <p>Here is my environment :</p>
  <p>Ionic:</p>
  <pre><code>   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
  </code></pre>
  <p>Capacitor:</p>
  <pre><code>   Capacitor CLI   : 2.4.0
     @capacitor/core : 2.4.0
  </code></pre>
  <p>Utility:</p>
  <pre><code>   cordova-res : not installed
     native-run  : not installed
  </code></pre>
  <p>System:</p>
  <pre><code>   NodeJS : v14.7.0 (/usr/local/bin/node)
     npm    : 6.14.7
     OS     : macOS Catalina
  </code></pre>
  <p>Here is the page SCSS code :</p>
  <pre><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;
    }
  }
  </code></pre>
  <p>HTML code :</p>
  <pre><code>&lt;ion-header [translucent]=&quot;true&quot;&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;
        Blank
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content [fullscreen]=&quot;true&quot;&gt;
    &lt;div id=&quot;container&quot;&gt;
      &lt;strong&gt;Ready to create an app?&lt;/strong&gt;
      &lt;p&gt;Start with Ionic &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://ionicframework.com/docs/components&quot;&gt;UI Components&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  <p>And the result in image :</p>
  <p><a href="https://i.stack.imgur.com/m5Et8.png" rel="nofollow noreferrer">header white but not transparent...</a></p>
  <p>So if someone has already had this issue or the solution, it would save me and my app from many many troubles.</p>
  <p>thank you
  Bye</p>