Gradient for top section of every page

Hello,

Hoping someone can help me with a website build I'm working on.

I have some working custom CSS code:

section[data-section-id="5e8ee9f70ac4ea59df0ec51f"]
	.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;
}

It does what I want it to (produce a gradient background for the top section of a page):

However, I would like this gradient to appear in the top section on every page of the website.

Is it possible to achieve this without getting every data-section-id for each page? The site isn't big, but I would like it to work well for any new pages the client adds (mainly blog posts) without them having to edit the CSS each time.

I've been searching for a couple of hours now (I like to fix things myself if I can) with no luck.

Many thanks – Gareth

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!

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;
}

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. 🙌