The problem with Squarespace sites is that they often resemble other 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 outermost div that holds the rest of the HTML), we need to remove the set background property to be transparent, allowing 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 that the background colour shows through.
#siteWrapper{background:linear-gradient(126deg, white 0%, #f1d3bc 100%);}
Setting a background for the 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. As Squarespace designers UK, we do this reguarly. If you hover over a section element and right-click, then click "Inspect". Find the enclosed 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 a 6-minute video that shows 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 provided you with a framework to work with them, and I highly recommend checking the MDN docs for complete details.
I'm confused or stuck?
If you have any questions at all, the best way is to leave a comment on the YouTube video. I will get back to you on there.