Bootstrap 5 - Background Cover Image With Transparant Overlay Content

Question

I am currently trying to code a frontpage according this design, using bootstrap 5. I've managed to set the background to cover the entire page. However, I can't seem to get the white transparent overlay-block right, and the placing of the content inside. This should also be responsive according to this design.

Whats the best solution for doing this?

Currently I've got:

Startpage html

<div class="startpage">
    <div class="hero">
        <div class="container">
            <div class="row">
                <div class="col-md-7 offset-md-1">
                    <h1 class="pb-2 pb-md-4">Heading Title</h1>
                    <button class="btn btn-primary mt-3" type="button">Button Title</button>
                </div>
            </div>
        </div>
    </div>
</div>

Startpage css

.startpage {
   height: 100vh;
   background: url(URL HERE);
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.hero {
    background-image: linear-gradient(rgba(250, 250, 250, 0.95), rgba(255, 255, 255, 0.8));
    min-height: 70%;
    padding-top: 200px;
}

On the navbar I've got:

header {
  position: absolute;
  width: 100%;
}