Applying opacity in a Background

Question

I’m trying to apply opacity to my background image. I’ve tried using rgba, and the pseudo-class after. Is there any other way to apply this filter only to the image without affecting the content?

This is the HTML

<div id="banner" style="background-image: url(wp-content/themes/enepe/images/bg_header.jpg);">

And the CSS

#banner{
width: 100%;
background-repeat: no-repeat;
background-size: cover;}

Answer 1

There are some CSS properties that when applied to "parent elements", "child elements" inherit the characteristic applied to the parent. This was your case. Read more

The CSS property opacity specifies the transparency of an element, i.e., the degree to which the background behind the element is superimposed

Using opacity: .4;

    .banner {
      position: relative;
      z-index: 5;
      height: 300px;
      width: 300px;
      color: #000;
      font-size: 400%;
      padding: 20px;
    }

    .banner .bg {
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(https://i.stack.imgur.com/CIy6w.jpg) center center;
      opacity: .4;
        width: 100%;
        height: 100%;
    }

    <div class="banner">
        <div class="bg"></div>
        Eu Não estou opacitado? :)
    </div>

Answer 2

Using RGBA, I always use it this way :D

.img{
    background: url('https://static.omelete.uol.com.br/media/extras/conteudos/01-Spoilers_fcaRwD9_4VjGalG.jpg') no-repeat center;
    background-size: cover;
    height: 300px;
    position: relative;
}

.opac{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.5)
}

.opac h1{
    color: #FFF
}

<div class="img">
        <div class="opac">
            <h1>CONTEUDO</h1>
        </div>
    </div>

Answer 3

This solution that friend posted is almost correct. I made some crossbrowser changes and included some necessary properties. I left below a live example. I hope I helped.

** jsFiddle live preview

https://jsfiddle.net/gmtgr1ht/? utm_source=website&utm_medium=embed&utm_Campaign=gmtgr1ht

#banner {
  width: 100%;
  height: 100vh;
  position: relative;
}

#banner:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
  background: url(http://www.jj.com.br/galerias/noticias/1000/codigo_0021653/2015-10-10_13-38-03_1.jpg) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

<div id="banner">
  <h3>See how the text is not transparent.</h3>
</div>

Answer 4

Try it like this:

#banner {
   width: 100%;
   background-repeat: no-repeat;
   background-size: cover;
}
#banner:after{
   content : "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background-image: url(wp-content/themes/enepe/images/bg_header.jpg); 
   width: 100%;
   height: 100%;
   opacity : 0.2;
   z-index: -1;
}