Opacity does not working on Ionic 3

Question

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>

Answer 1

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.stack.imgur.com/FEEPy.jpg) no-repeat center / cover
}