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

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

Identifiy 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. 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, express 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.