Jump to content

Create a background gradient in 7.1 from first section through header

Go to solution Solved by tuanphan,

Recommended Posts

I want to create a background gradient from bottom of the first section on a page through the header.

I can get a gradient through the first section using:

<style>
.fluid-engine {
background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40);
}
</style>

but this stops at the header. 

How can I get a consistent gradient from bottom left of the first section through to top right of the header? 

Password for my site is: Callan

Screen Shot 2023-07-22 at 4.49.43 pm.png

Link to comment

Correction. The CSS for a gradient on just the first section of the home page is:

 

<style>
.fe-64bb3cc5c329b51a58554d1f {
background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40);
}
</style>

Link to comment

Thank you, that had an effect but the gradient still does not go all the way from top to bottom of the page section. There is still a border top and bottom of the section that is only one shade of dark red. 

Link to comment
On 7/30/2023 at 7:18 AM, Callan said:

Thank you, that had an effect but the gradient still does not go all the way from top to bottom of the page section. There is still a border top and bottom of the section that is only one shade of dark red. 

You mean this bottom

image.thumb.png.67c8021718841ac9f8edf7a9992a728d.png

and this top?

image.thumb.png.2d3e1dd5e1f02670b3cc0c9fe2ae3ae8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

Use this code

<style>
  article section:first-child .section-background {
    background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40) !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/1/2023 at 9:27 PM, tuanphan said:
<style>
  article section:first-child .section-background {
    background-image: linear-gradient(to right top, #620e0e, #80191a, #9f2526, #c03132, #e23d40) !important;
}
</style>

That worked, thank you. Appreciate your help! 

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.