title: fixed or sticky the header background image up to the specific section only
body: <p>how could I fixed or sticky the header background image up to the first section only?
  let's say this is the code:</p>
  <pre><code>&lt;header id=&quot;header-bg&quot;&gt; &lt;!-- inside this id has a background cover img --&gt;
       &lt;!-- header content here --&gt;
  &lt;/header&gt;
  
  &lt;section id=&quot;first-section&quot;&gt;
       &lt;!-- content here --&gt;
  &lt;/section&gt;
  </code></pre>
  <p>my goal is to stay/fixed or sticky the header background up to the first section when scrolling. once the first section is end, the header background is not fixed/sticky anymore.</p>