headerImage will most likely return a MediaWithCrops object (as that is wat the image picker returns).

So you are currently trying to print the object itself, which will not work. You need the code to know what kind of object it is, so you can get the properties of that object.

You could try this above the Header tag

@{    
    if (Model.Value("headerImage") is MediaWithCrops imageObject)
    {
        @imageObject.Url();
    }
}

This would print the URL above the header.

So in total you could do something like this:

@{   
    var imageUrl = string.Empty; 
    if (Model.Value("headerImage") is MediaWithCrops imageObject)
    {
        imageUrl = imageObject.Url();
    }
}
<header class="masthead" style="background-image: url(@imageUrl)">

        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>@Model.Value("title")</h1>
                        <span class="subheading">@Model.Value("subtitle")</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

It however is var easier to have Typed values. Worth looking into it for Umbraco, so you could easily do Model.HeaderImage.Url()

Introduction to Modelsbuilder

Models builder settings

is working on a reply...