タイトルバーを最初に開いた時から、画像に重ねて表示させたい

前提

議事ホームページを作っています。
CSSについて質問させてください。

実現したいこと

上に固定したタイトルバーを、ページ開いた時から
画像に重ねておきたい。

該当のソースコード

HTML

<div class="main"> <div class="header_background"> <div class="header"> <div class="logo"> <img src="./image/logo_green.png"> </div> <div class="menu"> <ul> <li>News</li> <li>About</li> <li>Services</li> <li>Recruit</li> <li>Contact</li> </ul> </div> </div> </div> <div class="img-wrap_content"> <div class="img-wrap"> <img src="image/IMG_0258-1.jpeg"> <img src="image/IMG_0256.jpeg"> <img src="image/IMG_0242-1.jpeg"> <img src="image/IMG_0224-1.jpeg"> <img src="image/IMG_0218-4.jpeg"> </div> <div class="bottom-left">世の中の課題をITで解決し、<span class="font_test">関わった世界中の人たちを幸せにする</span></div> </div> </div>

CSS

body { background-color: #eaeaea; margin: auto; width: 100%; padding: 0px;} .main {} .header_background { position: sticky; position: -webkit-sticky; top: 0; padding-top: 40px; padding-bottom: 40px; background-color: white; background: rgba(255, 255, 255, 0.8); background-size: cover; z-index: 100; /*重なり調整*/ } .header { margin: auto; max-width: 1200px; display: flex; align-items: center;} .menu { margin-left: auto;} .menu ul { display: flex; gap: 40px;} .img-wrap_content { position: relative; margin-bottom: 100px;} .img-wrap { width: 100%; height: 800px; position: relative; z-index: -1;} .bottom-left { position: absolute; bottom: 25px; left: 25px; font-size: 30px; font-weight: 600; color: white;} .font_test { color: yellow;} .img-wrap img { width: 100%; height: 800px; position: absolute; /*重なり調整*/

試したこと

z-indexで重ねることができるのはわかりましたが、
ページを開いた時から重ねる方法がわかりませんでした。
heightをなくせばいいのかと思い試しましたが、
背景がなくなってしまうので駄目でした。

最初に開いた状態から、固定した白いバーを下の画像のように表示したい↓