Tel: +44 (0) 1224 582948

#2 Transforming your Squarespace sites with CSS backgrounds

The problem with Squarespace sites is that they look like Squarespace sites. This tutorial gives you a way to differentiate your sites and stand out from the crowd.

Apply background image to the body or #siteWrapper

To apply a CSS background to the body or SiteWrapper (The outmost div that holds the rest of the HTML) we need to remove the set the background property to transparent to allows the underlying element to show through.

#siteWrapper .section-border,
#siteWrapper .section-background{background:transparent;}

We can then set a class on the siteWrapper itself so the background color will show through.

#siteWrapper{background:linear-gradient(126deg, white 0%, #f1d3bc 100%);}

Setting a background to the a Squarespace section

There is of course a lot more to setting a background on the body or #siteWrapper. You can set a CSS background to any element. If you hover over the element a section element and right click, and click "Inspect". Find the enclosing section id. You can then style that section.

[data-section-id="64a6a7b218275c1643137771"] {background:url('https://static1.squarespace.com/static/64527f86876d525e6d46a2b3/t/6453c9e77a70c66bbf7f5dcd/1683212775612/noise-14.png'),linear-gradient(126deg, red 0%, #f1d3bc 100%);}

^ you will need to replace the section ID with your own, on your Squarespace site.

Targeting a shape element within a section

If you have a shape element within your section you can target that too by using the .sqs-shape class.

[data-section-id="64a6a7b218275c1643137771"] .sqs-shape {background:url('https://static1.squarespace.com/static/64527f86876d525e6d46a2b3/t/6453c9e77a70c66bbf7f5dcd/1683212775612/noise-14.png'),linear-gradient(126deg, blue 0%, #f1d3bc 100%);}

So many possibilities

This is only a 6 minute video of showing you the basics of using CSS backgrounds. The world is your oyster when it comes to customising your Squarespace sites with the CSS background property. I have given you a framework here to work with them, and I fully recommend you check the MDN docs for full details.

I'm confused or stuck?

If you have any questions at all the best way to leave a comment on the YouTube video. I will get back to you on there.

Last updated: