HTML CSS

<div class="container">
  <h2>Coffee time (no overlay)</h2>
</div>

<div class="container overlay">
  <h2>Coffee time (with overlay)</h2>
</div>

.overlay {
    border-image: linear-gradient(hsla(0, 0%, 0%, 0.2), hsl(0, 0%, 0%)) fill 0;
  }

  .container {
    height: 200px;
    width: 100%;
    max-width: 600px;
    margin-block: 1rem;

    background: url(https://picsum.photos/id/63/1200/400) center/cover;

    display: grid;
    place-items: center;

    color: #fff;
  }

  body {
    height: 100dvh;
    margin: 0;

    display: grid;
    place-items: center;
  }