Search code examples
cssionic3background-image

Opacity does not working on Ionic 3

How to put a dark opacity only in the background image? Below is the CSS code

.loginPage{
   background:url('../../assets/icon/backgroundlogin') no-repeat center;
   background-size:cover;
   background-color:rgba(0,0,0,.5);
}

And here, my html code

<ion-content padding class="loginPage">
// Here is my content
</ion-content>

And here is my image

Solution

  • You need to use multiple backgrounds, using commas, something like:

    background: linear-gradient( rgba(0, 0, 0,.5), rgba(0, 0, 0, .5)), url('../../assets/icon/backgroundlogin') no-repeat center

    Here is a basic example:

    body {
  background: linear-gradient(rgba(0, 0, 0,.5), rgba(0, 0, 0, .5)), url(https://i.sstatic.net/FEEPy.jpg) no-repeat center / cover
}