Jump to content

background image for page isn't working with header code injection

Recommended Posts

Ever since SquareSpace was updated a few months back, the custom code blocks I made so that I could have a few pages with different image backgrounds stopped working entirely. I've tried using code blocks, custom CSS, and header code injection on the sites, but none of them will work. I cannot figure out what is wrong, and it is super frustrating.

Here is an example of a header code injection I've tried:

/*Add the image as a background*/
#page{background-image:url(https://static1.squarespace.com/static/6132633584be0e331f803da6/t/630965f6ad41a04dffeccfe9/1661560310932/Squiggles+1.jpeg);background-size: cover}

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

I've also tried a code block, which worked before Squarespace's update.

Can someone *please* explain to me what I am doing wrong?

Screen Shot 2023-06-05 at 5.02.58 PM.png

code block.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Change last code

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

to this

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


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.