How can I set an image as a background for multiple sections?

Hi, I would like to set an image as a background behind 3 different but consecutive sections. Can anyone tell me if and how this is possible? Looking forward to your help!

https://www.lebendige-gaerten-hh.de/
pword: lebendigegaertenhh2023

Not sure if this code still works, but I used this in 2023.

This code if it works will put the image behind every section on the page and across the website. If you want it to be just on one page, head to page settings > advanced > header injection > and then in the header injection box, place the code below. 

.section-border{opacity:0!important}

/* Add the image as a background*/
#page{
background-image:url(url-here);
background-size: cover
}

/* Make the page section backgrounds transparent */
#page .page-section {
background: transparent!important;
}

#page .page-section .section-background {
background: transparent !important;
}

You will need to add the image to the custom files in the custom css panel, and then grab the url by clicking on the image, once it is uploaded. Then past the url where it says (url-here).

Hi @Nomis did the code I share with you work?

On 4/12/2024 at 3:32 AM, justinjamesclack said:

Hi @Nomis did the code I share with you work?

Hey Justin,

If I want this to only affect a certain page, what do I replace #page with?  Also, so far I have tried what you have and added the image but all I get is white.  Here's what I did.

Thanks for the help, hopefully this works.

.section-border{opacity:0!important}

/* Add the image as a background*/
#Home-2{
background-image:url(https://static1.squarespace.com/static/664cab6c88cdf41ca188b1c5/t/66bd4077ea6c6279949cf5be/1723678846710/Web_BG_1.png);
background-size: cover
}

/* Make the page section backgrounds transparent */
#Home-2 .page-section {
background: transparent!important;
}

#Home-2 .page-section .section-background {
background: transparent !important;
}