Jump to content

Gradient for top section of every page

Recommended Posts

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):

1494372396_Screenshot2020-07-22at18_07_41.thumb.png.72e28141bfb89c848437cf37ae547195.png

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

Gareth K Thomas | Clarified.
- I will make your website work.
- Conversion optimisation, usability testing, analytics.

Link to comment
  • Replies 8
  • Created
  • Last Reply

Amazing, thank you @rwp.

Works perfectly for all pages apart from the blog posts:

413971375_Screenshot2020-07-22at19_34_33.thumb.png.2cca2d7b565110ade1dc124fd7d65f75.png

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

Gareth K Thomas | Clarified.
- I will make your website work.
- Conversion optimisation, usability testing, analytics.

Link to comment

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

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.