Make a background photo opaque/darken. Should I use pseudo element ::after?

Question

I need to darken/or render opaque a background photo in the html header. I tried to use ::after in relative position by applying a rgba, but it is not working. What solution could I give in this case?
I put the class directly in the html header. And the image in class header (css) Desde Jah Agradeco!!

<header class="header">
<div class="container">
  <a class="header-logo grid-4" href="#">
    <img class="" src="images/logo.svg" alt="Logo">
  </a>
  <nav class="header-menu">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Support</a></li>
    </ul>
  </nav>
  <div class="title">
    <h1>Immersive <br> experiences <br> that deliver</h1>
  </div>
</div>

.header {
  width: 100%;
  height: 650px;
  background: url("../images/desktop/image-hero.jpg") no-repeat center;
  background-size: cover; 
}

Answer 1

In that case you don’t necessarily need pseudo-element you can just add two backgrounds in the same element, one with the image, and above the image a linear-gradiente (the gradient in this case will start and end the same color).

To use two background in the same element just separate them by comma, type

  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(https://unsplash.it/200/180);

Follow the complete code with the example, I made one with a dark gradient over the image using color rgba(), and another with a white gradient.

.box {
  width: 200px;
  height: 180px;
  display: inline-block;

  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(https://unsplash.it/200/180);
}

.box + .box {
  background: 
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url(https://unsplash.it/200/181);
}

<div class="box"></div>
<div class="box"></div>

---

OBS: If you want to have a "crazy" by superimposing images or multi-colored gradients you can still play with the property background-blend-mode. Here’s a playground for you to see in action: https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-blend-mode

Answer 2

A very practical way, as in the commentary of Augusto Vasques, would be with the filter:

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("https://i.stack.imgur.com/yiAZV.jpg") no-repeat center;
  background-size: cover;
  filter: brightness(0.25) opacity(0.75);
}

<div id="background"><div/>

But when it comes to CSS, there are always various ways, as your need.

It is worth saying that in case it is a static image, like the background or a banner, you could use the ready image (with .png, you can maintain image transparency, for example by looking for an online editor or even a free app like Photoscape or paid, like Photoshop).