Background Greyscale With Dynamic Background(Setting Background In-line)

Question

I have to Greyscale a Background image but the image is getting filled by the posts Thumbnail, So I cant add a :After or :Before And Containers make things messy as I have to overlay images and text in different spots

Its Greyscaling the Content which is the problem for me.

The Expected Outcome

My Attempt and Issue

<div class="s-brand-header">
    <div class="brand-container" style="background-image: url(<?php echo get_the_post_thumbnail_url( null, 'full' ); ?>)">

        <img class="brand-header-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-1.png">
        <div class="brand-h-block">
            <img class="line-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Little-Line-Thing.png">
            <h3 class="railway-simple">BRAND STORIES</h3>
            <h1><?php the_title() ?></h1>
            <img class="line-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Little-Line-Thing.png">
        </div>
    </div>
</div>

.brand-header-img{
    position: absolute;
    left: 0;
}
.brand-h-block {
    padding-top: 500px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: 800px;
    flex-direction: column;

    color: white;
    text-align: center;
}
.brand-container {
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

}

I'll figure out the Positioning and such out but I dont know how id get just the background to be grayd

another thing ive tried is a Div overlay over the image but the Text is still grayd

.overlay{
    background: rgba(0, 0, 0, 0.5);
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    }

<div class="s-brand-header">
    <div class="brand-container" style="background-size: cover;background-image: url(<?php echo get_the_post_thumbnail_url( null, 'full' ); ?>)">
    <div class="overlay">

    </div>

Resolved using:

.brand-containe{
  background-color: gray;
    background-blend-mode: luminosity;
    filter: grayscale(100%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    opacity: 1;
}