Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS for background color opacity


Callan

Question

Hi all, I'm having trouble changing the opacity of a heading background color in the custom CSS field.

I'm using the code below and thought the .5 in the final line would make opacity 50%. But it isn't working for some reason I can't figure out. 

#block-yui_3_17_2_1_1595131393232_6522 {
 padding-top: 20px;
background-color: #292b47; /* fallback for old browsers */
background-color:rgba 41, 43, 71, .5;
}

The attached screenshot is how the block renders.

 

opacity.png

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Aha, got it. thanks for your help!

Posted Images

7 answers to this question

Recommended Posts

  • 0

Hi RWP, 

the rgba format is not working as suggested for some reason. And the opacity: 0.5 script applies to the whole box area, text and background. I want only the background color to be transparent.

Link to post
  • 0

Please post a link to your page.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

Set it up password protected and pm the password.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

You still have the syntax for rgba incorrect

#block-yui_3_17_2_1_1595131393232_6522 {
    padding-top: 20px;
    background-color: rgba(41,43,71,.5);
}

image.thumb.png.f0aaac869e5e212e99f57f310cce8ba7.png

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...