How to hide the background art pause button in Squarespace

Sep 28

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

New to Squarespace 7.1, the background art feature generates interesting background designs for page sections.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.
I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

If you have background art enabled for a page section on your site, you might have noticed the pause/play button on the bottom right hand side of the page section.

This button is pretty simple and totally customizable thanks to CSS!

This tutorial will show you how to hide it completely, change the shape, or change the color... or both if you want to combine them!

Here are the codes from this tutorial:

Want to hide the button? Try this:

.background-pause-button.visible {display: none!important}

Make it a square? This code will work!

.background-pause-button.visible {border-radius: 0px!important}

How about changing the color? Change the word purple in the code below to a web-safe color name, HEX color code, or an RGBA/HSL color you want to see: