Add a block of colour to a blog post header

Hey guys, how would I go about adding a solid block of colour to a blog post header, roughly 25vh, with the title sat in the middle?

Attached is a pic of how I'd like it to look.

Usually for this, I'd use Will Myers' blog post header plugin, but this colour needs to be on all blog posts whilst being able to have a separate thumbnail image.

Site: https://echidna-trout-5mcr.squarespace.com/mission-blog/blog-post-title-one-rgamz password = pass

If you use Will's plugin and set the overlay to a solid colour and 25vh it should look like your mockup. It of course would be best not to load the image at the top, but I'm sure that would be possible for loading time.

You can also add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('<h1 class="custom-blog-heading">Mission Blog</h1>').insertBefore('div.blog-item-wrapper.blog-basic-grid-item-wrapper');
});
</script>
<style>
  h1.custom-blog-heading {
    text-align: center;
    background-color: #bbccc4;
    height: 25vh;
    margin: 0 !important;
}
[class*="type-blog"].view-item header#header {
    background-color: #bbccc4 !important;
  }</style>