Can I have a div that has a parallax image also show the parallax'd image scroll up

Question title might be a bit confusing as I'm not sure how to properly explain this.

I have a video example of the desired result: https://bcx-production-attachments-us-west-2.s3-us-west-2.amazonaws.com/99ccd694-7e7d-11ea-940f-a0369f08283c?AWSAccessKeyId=AKIAIXJK7HJ33HYQWMEQ&Expires=1587420147&Signature=zhLi2pKSDMHFWCcbtAZE7f5Gz5k%3D&response-content-disposition=inline%3B%20filename%3D%22Parallax%20Example.mp4%22%3B%20filename%2A%3DUTF-8%27%27Parallax%2520Example.mp4&response-content-type=video%2Fmp4

My understanding of parallax is that the image stays fixed while the following elements scroll 'past' it. In the video, the background image appears to be parallax as the "Transparent Section' container scrolls past it like how parallax would behave. But on the other hand, the image itself scrolls up under the header.

I've been playing around and can't seem to achieve this result. Thinking about how parallax works with background-attachment: fixed, I can't seem to wrap my brain around how I can achieve this. My Parallax'd image does not scroll up under the header but rather stays put. I've just been doing purely css on this so far, not sure if Javascript is required.

I'm looking for some insight if this is possible and if so, how abouts would I go with getting this look.

ALSO: the header stays fixed until it meets the top of the 'Transparent Section' container, then it scrolls away with the rest of the page. The parallax'd image scrolls at a slower speed. Separate details if that matters.

EDIT:

https://codepen.io/losttech/pen/wvKzYmX Here is codepen of what I have, I am unable to achieve the parallax image scrolling up into the header as in the video.

HTML:

<div class="parallax-container">
  <div class="header-container">
    <header>
    <ul>
      <li>Menu 1</li>
      <li>Menu 3</li>
      <li>Menu 3</li>
    </ul>
  </header>
  </div>
  <div class="parallax-img-container">
    <div class="blurb">
      Transparent Section
    </div>
  </div>
</div>
<div class="body-content">
  <h2>Rest of the body content here...</h2>
</div>

CSS:

.parallax-container {
  height: 730px;
  position: relative;
}

.header-container {
  height: 550px;
  position: absolute;
  width: 100%;
  z-index: 99999;
}

header {
  width: 100%;
  background: grey;
  height: 80px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
}

ul {
  display: flex;
  li {
    list-style: none;
    margin-right: 1rem;
  }
}

.parallax-img-container {
  height: 650px;
  background-image: url(https://wallpaperaccess.com//full/83991.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.blurb {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-content {
  height: 500px;
}

Solution

Yes this type of parallax requires a bit of javascript. What you need to do is capture the scroll event and alter the background position based on a fraction of how far the user has scrolled.

Here's how I've done it before:

const el = document.getElementsByClassName("parallax-img-container")[0];
window.addEventListener("scroll", () => {
  let offset = window.pageYOffset;
  //0.5 can be whatever you want it will adjust how far / fast the image appears to scroll
  el.style.backgroundPositionY = `${offset * 0.5}px`;
});

edit:

I refined the el selector to get the class from your html and removed the css background-attachment: fixed property since it is not used in this different parallax technique.

See it in action: https://codepen.io/jguitarz/pen/WNQGYQB