Gradient for top section of every page

OK lets try this:

body.view-item #header {
    background-color: #231f45;
    background-image: url("https://static1.squarespace.com/static/5e8ee8871b56fa68d7df7b4b/t/5f0f53c91a35720fae014234/1594840010004/2.png"), linear-gradient(#231f45,#231f45,#231f45,#8d4755);
    background-size: 100%, cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain, cover;
}

body:not(.view-item) #page section:first-of-type .section-background {
    background-color: #231f45;
    background-image: url("https://static1.squarespace.com/static/5e8ee8871b56fa68d7df7b4b/t/5f0f53c91a35720fae014234/1594840010004/2.png"),linear-gradient(#231f45,#231f45,#231f45,#8d4755);
    background-size: 100%,cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain,cover;
}

section:first-of-type .section-background {

Amazing, thank you @rwp.

Works perfectly for all pages apart from the blog posts:

I was thinking of doing something to override the CSS on blog posts only...

#header {
    background-color: #231f45;
}

Can't seem to find a way to make that apply to blog posts though?

Thank you – Gareth

Whats the link to the page?

https://lychee-dragonfly-3dts.squarespace.com/news/there-will-be-no-miracles-here

Password is just: promont

Replace with this.  I just realized that takes over the first section of your footer too......

#page section:first-of-type .section-background {

I will look into blog posts now.

Well spotted, thank you!

Amazing, that works better than I expected. Looking at the code... I would've had no chance of figuring that one out.

Really appreciate your help @rwp. 🙌