Jump to content

Change background opacity of text block without changing opacity of text.

Go to solution Solved by bigpoppapaul,

Recommended Posts

Site URL: https://grouse-seal-j62k.squarespace.com/home-1

Hi there, 

I'm hoping someone can help, I've currently added a background color so that the text can be visible over the background video. However, I'd like to change the opacity of the background WITHOUT changing the opacity of the text. The CSS I'm using right now does both.

This is what I have currently used. 

#block-d325a806d44c4257f1d4 {
background: #000000;
opacity: 0.5;
padding: 5px;
text-align: center;

Any help would be appreciated or if you have an even nicer looking way to do this (like say, with the big rectangular black bar) that would work too. 

The password is "prince"

Link to comment
  • Solution

So, I answered my own question but will leave it up in case anyone else wants to know. Instead of using hex for the color of the background, I used HSLA format. 

#block-d325a806d44c4257f1d4 {
background: hsla(0,0,0,.15);
padding: 1px;
text-align: center;

For anyone that doesn't know, the last number (.15 in this case) represents the opacity of the background color.  This way it will only affect the background color and not the whole block, thus the text stays opaque while you can freely change the transparency of the background. 



Link to comment
  • 6 months later...
  • 4 months later...

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.