Jump to content

Changing the overlay opacity of text background

Recommended Posts

Site URL: https://www.nimpairings.com

Hello Squarespace Community,

I use Squarespace 7.1 and I would like to know if there is a way to change the overlay opacity of the new text background feature. So far, I can only add a solid white background but I would like a white background with 50% opacity. Is there a way to achieve this using custom CSS?

Thanks a lot for your help!


Link to comment

Hello again, 

I tried using this code on a specific block and I got a text background with 50% opacity but the text itself is also becoming less opaque, which I don't want. What should I add to the code to keep the text fully opaque and bright? 


background: #013220;

padding: 10px;

opacity: .5 !important;

text-align: center;



Thanks a lot for your input!

Screenshot 2022-08-16 at 21.11.28.png

Link to comment

Please see the following.

Here is some updated CSS.

#block-62d5567fe2436e5b6229f4a4 {

  background-color: rgba( 1, 50, 32, 0.5 );
  padding : 10px;
  text-align: center;

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.