Change Footer Section background on ONLY one specific page of website

Hello SQSP forum, 

Please help me  help get a specific page on my website to have a different colored footer section than the rest of the website. On the LOADED page of the website (SHOP nav/Loaded), I want to use a green gradation background image (similar to the header on this page).  I was able to use CSS to change the header to the green gradation background image I imported, but can't find a good css solution for the footer section.  The footer has two sections.  The 2nd lower section now is a red image gradation that is on all the website's pages. 

The website password = peak 

For reference - You can also check this Loom video link (free to view): https://www.loom.com/share/0422adc46a0c4c1d917b34c0e67664cf

Thank you,

Freed 

5 hours ago, Freed2023 said:

Hello SQSP forum, 

Please help me  help get a specific page on my website to have a different colored footer section than the rest of the website. On the LOADED page of the website (SHOP nav/Loaded), I want to use a green gradation background image (similar to the header on this page).  I was able to use CSS to change the header to the green gradation background image I imported, but can't find a good css solution for the footer section.  The footer has two sections.  The 2nd lower section now is a red image gradation that is on all the website's pages. 

The website password = peak 

For reference - You can also check this Loom video link (free to view): https://www.loom.com/share/0422adc46a0c4c1d917b34c0e67664cf

Thank you,

Freed 

Can you share your URL so I can take a look?

Hello, Thanks for your reply.  Sorry, I forgot to share the URL.  

The website is = https://carrot-disc-nsp7.squarespace.com/

The Password = peak

2 hours ago, Freed2023 said:

Hello, Thanks for your reply.  Sorry, I forgot to share the URL.  

The website is = https://carrot-disc-nsp7.squarespace.com/

The Password = peak

Try adding to Home > Design > Custom Css

#collection-63c064f3d5f3d05d35932987 section[data-section-id="63c064e1d5f3d05d359326af"] .content img {
  visibility: hidden;
}
#collection-63c064f3d5f3d05d35932987 section[data-section-id="63c064e1d5f3d05d359326af"] .content-fill {
  background: blue;
}

My testing

Hello Beyondspace, 

Thank you so much for the code. It works!

I did find one issue. When I try a simple color change like your blue color, the results were great.  But when I tried my imported background gradation image (green/orange color), I found that the background image file I inputed into the css showed on the screen but was not extending fully to the right side of the of image block.  I am not sure why this is happening. Do you have any suggestions on what I should check to solve this issue?

Check the attached image for an example of what the webpage looks like.   

Best, 
Freed

Hello Beyondspace,

Thank you so much for the extra code.  It worked perfectly!  

I really appreciate your help with this footer issue!

Freed

14 hours ago, Beyondspace said:

Try adding some additional code to our css code

background-repeat: no-repeat;
background-size: cover;

 

This worked great to solve the issue.