Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gradient for top section of every page


Go to solution Solved by rwp,

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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

Whats the link to the page?

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.

Posted Images

8 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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 post
  • 0

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

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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...