Header overlay over Hero - html

Question

I am working on a website. I am a little rusty when it comes to CSS. I am trying to get the same effect as this page https://prp.fm/. I want the header to be over the hero section with a transparent background. The header does not need to be sticky, but I am unable to get the header to overlay over the header.
I tried adding background-attachment:fixed in the .hero-section CSS, but it would just fix the image to the page and not scroll with the page. That I do NOT want. I want the hero section to be behind the header and scroll with the page.
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>

Answer 1

Just reduce an opacity on the header and increase the font-weight of the contents which are in the header like the following
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
opacity: .3; /* added */
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>