title: Header overlay over Hero
body: <p>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 <a href="https://prp.fm/" rel="nofollow noreferrer">https://prp.fm/</a>. 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.</p>
  <p>I tried adding <code>background-attachment:fixed</code> in the <code>.hero-section</code> CSS, but it would just fix the image to the page and not scroll with the page. That I do <strong>NOT</strong> want. I want the hero section to be behind the header and scroll with the page.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header-section" id="header"&gt;
    &lt;div class="header-warp"&gt;
      &lt;!-- Site Logo --&gt;
      &lt;a href="home.html" class="site-logo"&gt;
        &lt;img src="img/logo.png" alt=""&gt;
      &lt;/a&gt;
      &lt;!-- responsive --&gt;
      &lt;div class="nav-switch"&gt;
        &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="main"&gt;
    &lt;section class="hero-section"&gt;
    &lt;/section&gt;
    &lt;div id="inner"&gt;
      &lt;section class="some-section"&gt;
        &lt;div class="container"&gt;
          &lt;div class="section-title text-center"&gt;
            &lt;h2&gt;Tile&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="row about-box"&gt;
            &lt;div class="col-lg-6"&gt;
              &lt;img src="img/pic1.jpg" alt=""&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-6"&gt;
              &lt;div class="ab-content"&gt;
                &lt;h4&gt;A short History&lt;/h4&gt;
                &lt;p&gt;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.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>