Opacity on background image

Question

As far as I know I can't directly change the opacity of a background image but using ::before and ::after doesn't seem to let my image show up. Am I doing it wrong? HTML

flower window boxes

All of our products come in virtually any length up to 16 feet and two sizes. Our standard size boxes are designed to accommodate almost any flower. Our XL sizes are taller and deeper to provide more root space for plants making them the ideal sized window boxes for plants.

    </div>
    <div class="card-back">
        <h2 class="click-here"><b>Visit Site</b></h2>
        <div class="info">
        <h2 class="info">Email:</h2>
        <h2 class="info">Phone:</h2>
        </div>
    </div>

    <!-- Content -->
    <div class="all-content">
        <h1>Contrary to popular belief</h1>
    </div>
</li>

Current CSS

 .content li:nth-child(1) .card-back{
            background-image:url(../images/sponsor-imgs/Cellular%20PVC%20Columns-Kingston-1.jpg);
       width: 100%;}

What I've tried

.backimg::after {
    background-image:url(../images/backimg/wide.png);
      opacity: 0.5;
}
.backimg::before{
        background-image:url(../images/backimg/wide.png);
          opacity: 0.5;
    }
div::after {

  opacity: 0.5;
}

On a side not i know i can simply make the images themselves transparent, but i feel like a code to do it much more useful in the long run. thanks in advance.

Answer 1

::before and ::after require a content property. You can set it to an empty string but it must be included.

In most cases you also need to define a display property and assign some dimensions to the element (unless you are using something like position: absolute; top: 0; bottom: 0; left: 0; right: 0; - in which case, you don't).

.backimg {
  background: red;
}

.backimg::after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background-image: url(http://placehold.it/200x200);
  opacity: 0.5;
}

<div class="backimg"></div>