title: ionic 3 creating a semi transparent overlay on ion-content
body: <p>i am using ionic 3 angular to build my app. So, as a requirement I have a background image globally on all the pages. for which i modified app.scss as:</p>
  
  <pre><code>.app-bg{
      background-image: url('../assets/images/background.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>this is used for ion-content like:</p>
  
  <pre><code>&lt;ion-content padding class="app-bg" &gt;
  </code></pre>
  
  <p>now on some of the pages I require a semi transparent layer to improve visibility of the actual contents. </p>
  
  <p>so, how do i do that?  I tried to add another background with some style sheet like</p>
  
  <pre><code>&lt;ion-content padding text-center  class="app-bg" style="background-image: url('assets/images/overlay.png');display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-color: hsla(0,0%,100%,0.70);
      background-blend-mode: overlay;
      background-repeat: no-repeat;"&gt;
  </code></pre>
  
  <p>but this does not seems to work</p>