Jump to content

Adding background image to section with custom CSS using DeGraw template

Recommended Posts

Site URL: https://holisticbirthandyoga.squarespace.com/

Hi there, 

I'm an amateur coder so I can't say for sure - but it seems like Squarespace's updated templates don't have collection ID's like they used to? I'm trying to change out the backgrounds on certain sections throughout the site i'm building for a client. The Custom CSS code i'm using isn't changing anything - can someone help? The template I'm using is DeGraw. The site URL is https://holisticbirthandyoga.squarespace.com/ and the password is 'mindbodyseva'.

And here is my current code: 

div#yui_3_17_2_1_1582161363093_67 {
    background-image: url("https://static1.squarespace.com/static/5e47144cdeb0101ed01307c5/t/5e4db9345e0c794068e4a3ab/1582152001491/Background_V1.jpg")
}

As a follow up question - Above I'm trying to switch the background to a whole new .jpg, but if someone knows how to code in transparent .pngs that lay over the default Squarespace background color, the code for that too would be very helpful. I feel like the background may have a chance of being more high res that way. 

 

Thanks so much for any help you can offer! 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

It still uses collection id on body tag

don't use #yui, It will change when you reload the page

Each section has different data-section-id. You can target this. [data-section-id="abcxyz123456789"] {css here}

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.