Adding site wide gradient to background on all pages

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

Can you share link to your site?

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!

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.

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

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!

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

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. 

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

4 hours ago, slam32 said:

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

.index-page targets Index Page only