Image opacity linked by CSS

Question

Is there any possibility of giving attributes to an item linked via CSS?

#content-homepage {
    background-image: url(../img/back.jpg);
}

I wanted to decrease the opacity of this image

Answer 1

option 1: opacity works on everyone see in https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Browser_compatibility

div.exemplo{
      width:150px;
      height:150px;
      background: url('https://i.imgur.com/r3MHkRT.jpg');
      opacity: 0.5
    }

<div class="exemplo"></div>

Option 2: filter see the compatibilities: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility_2

div.exemplo{
  width:150px;
  height:150px;
  background: url('https://i.imgur.com/r3MHkRT.jpg');
  filter: opacity(50%)
}

<div class="exemplo"></div>

Answer 2

Take this example:

div.teste {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div.teste::after {
  content: "";
  background: url('https://i.imgur.com/hlwO5D2.png');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  /* z-index: -1; */
}

<div class="teste">
</div>

Just apply on your project and fly!

If the background is superimposing some element of your project, simply uncomment the line of the z-index according to its elements.

Source: CSS Tricks - Transparent Background Images

Imagery: Psdgraphics - Abstract Purple Background