How to add a transparent background to text and button in Squarespace

This tutorial will show you how to add a transparent background to text and buttons on Squarespace. Please note this code works on both Squarespace 7.0 and 7.1.

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

Complexity: Easy

---

Step 1

Identify the Block IDs for the text and button using the plugin mentioned above

---

Step 2

From your Squarespace account, go to the Custom CSS Editor and paste the code into the Custom CSS editor box. Use this site https://rgbacolorpicker.com/ to create background rgba colours.

/* Transparent Background Colour */
#BLOCKID {
  background: rgba(39, 106, 245, 0.1);
  padding-top: 1.5vw;
}
#BLOCKID {
  background: rgba(39, 106, 245, 0.1);
  padding-bottom: 1.5vw;
}

---

Step 3

Replace the #BLOCKID’s with the BLOCKID’s, for this example the BLOCKID’s are ‘#block-6c86a25d0b91bb9aaab2’ and ‘#block-189b0d62a9bfa9dadb7d‘.

/* Transparent Background Colour */
#block-6c86a25d0b91bb9aaab2 {
  background: rgba(39, 106, 245, 0.28);
  padding-top: 1.5vw;
}
#block-189b0d62a9bfa9dadb7d {
  background: rgba(39, 106, 245, 0.28);
  padding-bottom: 1.5vw;
}

---

Step 4

You can add some additional css to improve the transparent background.

/* Transparent Background Colour */
#block-6c86a25d0b91bb9aaab2 {
  background: rgba(39, 106, 245, 0.28);
  padding-top: 1.5vw;
  border-radius: 20px 20px 0px 0px;
}
#block-189b0d62a9bfa9dadb7d {
  background: rgba(39, 106, 245, 0.28);
  padding-bottom: 1.5vw;
  border-radius: 0px 0px 20px 20px;
}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.