Remove the pause button from art background on Squarespace

One of the Squarespace updates that left me scratching my head was the introduction of art backgrounds. 

Art backgrounds are an immersive alternative to static images and videos. 

When they first came out, I wondered who on earth would use them. Ironically, I now use them on a lot of websites I build. Let’s just say after I did some research, I realised with a few tweaks they can look great.

When you add an art background however, it also brings up a small play/pause button in the corner which to be honest, looks messy. 

Whilst they’re a good way of allowing users to pause the art background if they feel the page is too busy, if you’re sticking to low-key art backgrounds there’s just no need for them.

Watch the video

Check out the YouTube video below 👇

After becoming frustrated at the fact that Squarespace won’t let you toggle the play/pause button, I created some simple code that does it for you, allowing you to remove the button from art backgrounds on Squarespace. 

To remove the background art button, you first need to find out what the element is called by using ctrl, command and hovering over the button. 

Usually it will be called something along the lines of background pause button visible. 

You then want to take the name of this element and copy and paste it into your custom CSS, adding the simple code:

// Remove art background button //

.background-pause-button.visible {

display: none

}

Click save and you’ll have removed the annoying play/pause button from your art background.


📩 Join the inner circle to get exclusive code updates


When it comes to creating art backgrounds, I recommend keeping them simple. Like a lot of Squarespace features, it can be tempting to go overboard with them. For the best and most effective results however, stick to low key options that don’t detract from the main content of your web page. 

Let me know in the comments if you use art backgrounds on Squarespace and if you find the play/pause button as annoying as me! 


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

How to create a fixed header on Squarespace

Next
Next

Adding a “zoom on hover” effect to Squarespace list carousels