JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div class="header-holder">
CSS background image with opacity
</div>

CSS

.header-holder{
  display: block;
  position: relative;
  height:400px;
 padding:30% 4%;
}

.header-holder::after {
  content: "";
	background:url("https://m1.behance.net/rendition/modules/124005913/disp/05b419c709073a3e3264c02a5c3ad39a.jpg") no-repeat fixed 100% 100% / cover  #fff;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}