Jump to content

Adding site wide gradient to background on all pages

Go to solution Solved by tuanphan,

Recommended Posts

Posted

I'm trying to add a gradient to the background of my website and I want it to appear over the whole site on all the pages.  I used the following code below but it's only affecting the 1st four pages of my website and no others.  On the other pages, the background remains a solid colour and the content sections of the pages have the gradient.  Can someone help me please?  I've been going round in circles over this and it's pretty important I get this website up in the next couple of days!  Thanks!

I'm using 7.0 with Pacific family template.

PS: I've attached images of what I mean.  The first image is how I want every page to work.  The second image is what's happening on the other pages other than the first 4.

 

.main-content {
    background: linear-gradient(170deg, #aec8ce, #44626a, #758990, #44626a, #213236, #9aadac, #819f9f, #213236, #476870, #44626a, #213236) !important;
}
page-section, .section-background {
    background: transparent !important;
}

Screenshot 2023-12-20 at 16.36.42.png

Screenshot 2023-12-20 at 16.37.54.png

Posted
Quote

I thought I had put the website link in the topic 🤔

You probably did but the field provided by the forum software doesn't display it as part of the post others see. You have to manually include it in the post.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
On 12/27/2023 at 4:38 AM, slam32 said:

Hi, thanks. Sorry, I thought I had put the website link in the topic 🤔 It's https://www.herauts.com/
Thanks in advance for your help!

Use this new code

div#siteWrapper, .main-content {
    background: linear-gradient(170deg, #aec8ce, #44626a, #758990, #44626a, #213236, #9aadac, #819f9f, #213236, #476870, #44626a, #213236) !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

This is great!  Thank you so much!  It's given me the site wide background gradient I was looking for, so that's brilliant.  However, I the content section on the other pages (text boxes, etc.) are also showing the gradient when I don't want this to be the case.  I would like the text to sit over the background with no background to the text itself.  Is it a transparency issue?  In the pictures shown in my original post, you can see what I mean.  The "NOUS AIDER" text box content has a gradient background whereas the text in the 1st image sits on top of the background.

Also, as a site note, was the div# the reason I couldn't get the effect I was wanting?  I'm trying to learn as effectively as possible as I go along 🤷. Thanks again!

Posted
On 12/28/2023 at 6:19 PM, slam32 said:

This is great!  Thank you so much!  It's given me the site wide background gradient I was looking for, so that's brilliant.  However, I the content section on the other pages (text boxes, etc.) are also showing the gradient when I don't want this to be the case.  I would like the text to sit over the background with no background to the text itself.  Is it a transparency issue?  In the pictures shown in my original post, you can see what I mean.  The "NOUS AIDER" text box content has a gradient background whereas the text in the 1st image sits on top of the background.

Also, as a site note, was the div# the reason I couldn't get the effect I was wanting?  I'm trying to learn as effectively as possible as I go along 🤷. Thanks again!

Where is this section? I can't find it on homepage and welcome page

image.png.1afc419f8d9aed24180712a5e46e7424.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Solution
Posted
On 12/31/2023 at 5:02 AM, slam32 said:

This page is under the menu tab "soutenir", but the problem is appearing on all other pages than the home page and all the pages connected to it in the first index.  For example, on the following page (infos pratiques) https://www.herauts.com/information

Try this new code

div#siteWrapper, .index-page .main-content {
    background: linear-gradient(170deg,#aec8ce,#44626a,#758990,#44626a,#213236,#9aadac,#819f9f,#213236,#476870,#44626a,#213236) !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Yes!  It works!   Thank you!!!  What did the designation of .index-page change in the code?  Thanks again.  I really appreciate your time and help. 🙂

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.