Jump to content

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

Recommended Posts

  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

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.