How to add header image parallax effect to pages and posts.

Hello,
The header image here https://tryit.tv/twentyseventeen/ has a parallax effect where the image stays still when the page is scrolled down and the menu moves over it.

However on pages and posts such as here https://tryit.tv/twentyseventeen/html-elements/ the header image scrolls up with the page.

I tried adding position:fixed; to the CSS of the img tag which stops the image from scrolling but then the remainder of the image scrolls appears below the menu where the page’s featured image appears. Then I tried changing the z-index but that did not help.

Can anyone add to or suggest a CSS or customisation on how the header image on pages and posts can have the parallax effect?

Thank you