opacity of whole page changing instead of background image

hey folks I have a div with the following css

.firstBackground{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url(../public/lakshay_background.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.firstBackground{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url(../public/lakshay_background.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

but when I add

opacity: 0.5;

opacity: 0.5;

in the above code opacity of whole page changes instead of the background-image is there anyway by which I can change the opacity of only background-image

MarkBoots•1/20/23, 6:40 AM

this class is set on the body? Then the whole body will get the opacity
if you only want to effect the background, you can put it in a before/after pseudo element of the body so it will only affect that

for example

MarkBoots•1/20/23, 7:00 AM

other option is to not use opacity, but using a stacked background with a translucent layer on top, so the image "seems" to have an transparancy
like