CODE EXAMPLE FOR CSS

black background overlay filter | black overlay for image css

Exp:
<header>
  <img src="https://picsum.photos/id/1036/4608/3072" alt="Placeholder-Image">
  <section>
    <h1>Heading</h1>
    <h2>Just another tech blog.</h2>
    <button>Read more.</button>
  </section>
</header>

Add This Css:
header img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: brightness(.4);
}


section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Roboto', sans-serif;
}