How to Add a Background Image to Buttons in Squarespace

Jul 15

Have you ever wanted to give your buttons a little extra flair? Maybe you’ve got a fun graphic or textured background you’d love to use instead of just a solid color. In this tutorial, I’ll show you exactly how to add a background image to your buttons in Squarespace using a little custom CSS magic ✨

Click play on the video below to follow along step-by-step — and scroll down after that to grab the code and see how each part of it works. I’ll also show you how to apply this style to just some buttons or limit it to just one section of your site. Lots of fun tricks in this one!

💬 What Does This Code Actually Do?

Let’s take a peek behind the scenes and break down the custom CSS, one line at a time. Here’s the main chunk of code we’re working with:

.sqs-block-button-element {
  background-color: transparent !important;
  background-image: url("your-image-url") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

So what’s happening here?

background-color: transparent !important;
This gets rid of the regular background color on your button so your image can shine through. And yes, that !important is super important — it tells Squarespace to listen to you, not its default settings.
background-image: url("your-image-url") !important;
This is where the magic starts! This line puts your uploaded image behind the text in the button. Just grab the file URL from your custom files and plop it between those quotation marks.
background-size: contain !important;
This makes sure the full image fits inside the button. It won’t get cut off or stretched — it’s like squeezing the image to fit without distorting it.
background-position: center !important;
This keeps the image perfectly centered inside the button. No awkward alignments here — just a nicely balanced design.
background-repeat: no-repeat !important;
This one’s key! It makes sure the image doesn’t tile or duplicate. You only want one image per button, not a whole stack of them.

Targeting a specific button content block using a block ID

If you only want the background image to show up on certain buttons, like the button in the header of your website, you can use a different selector class like this example below.

.header sqs-button-element {
  background-color: transparent !important;
  background-image: url("your-image-url") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

And if you only want the image to appear in one specific section of your site (like a call-to-action block or your “about us” section), you can combine it with a section ID like this:

[data-section-id="your-section-id"] .sqs-block-button-element {
  background-color: transparent !important;
  background-image: url("your-image-url") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

Or use the free Squarespace ID Finder chrome extension to grab the block ID and change an individual content block at a time with a code like this:

#block-987651234 .sqs-block-button-element {
  background-color: transparent !important;
  background-image: url("your-image-url") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

💡Did you know…

… there are over 20 different types of button classes in Squarespace? From button content blocks (primary, secondary, tertiary) add to cart buttons, quick view, list section item, and more. Each one has a unique selector class you can target with code, and my Squarespace code AI Custom Codey knows them all. 😎

If you want help creating a specific custom button for your site, chat with Custom Codey for 24/7 Squarespace code expertise! Learn more at CustomCodey.com