0

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

dippas
  • 52,735
  • 15
  • 110
  • 120
MKOT
  • 785
  • 1
  • 11
  • 30

1 Answers1

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
}
dippas
  • 52,735
  • 15
  • 110
  • 120
  • I tried that way too, but it did not work out. – MKOT Aug 19 '18 at 23:45
  • see updated answer, I was thinking using in another way , but for full cover has to be done with `linear-gradient` to fake rgba opacaity – dippas Aug 19 '18 at 23:47