7.1 How to add a faded/transparent background colour to a text block?

Site URL: https://gar-grouper-xgll.squarespace.com/config/pages

Hi everyone,

does anyone know how to add a faded/transparent background colour to a text block?
I would like to add a faded black background to the text in a picture.

I used this code - but nothing happens:

#block-yui_3_17_2_1_1623600063113_8511 {
  background: #8C7B69; /* change this to your own colour code */
  opacity: 0.7; /* this is the 'faded' effect. 0.5 is more faded, while 1.0 is no fading */
  padding: 50px 200px; /* height x width ; adjust this accordingly to your text */
}

 
Hope you can help me! 🙂
 

The div that contains the text has class "sqs-block-content" (try it). The block-ID div is probably not the right target. The code itself is working.

But, you will be targeting a universal class that affects everyone. Alternatively, you can just do the whole thing in a custom code block. It should be something like this:

<div id="text"> 
<p>Insert your text here<p>
</div>

<style>
#text {

background: #8C7B69;
opacity: 0.7; 
padding: 50px 200px;

</style>

Thanks for your reply, aravsanj.

Your code works perfectly! Can you also tell me how I to make the heading h3 solid white? Seems like the opacity affects both, text and background.
 

<div id="text"> 
<h3 style=“color: white“>Wenn der Blick in die Sterne Zuhause bedeutet...
<h3>

</div>

<style>
#text {

background: #000000;
opacity: 0.3; 
padding: 20px 40px;

</style>

One more thing: 
How can I add a border around this colored box with a certain distance?
I tried adding this to <style> with no effect:

border-color: black;  
border-width: 1px;  
border-style: solid;  

Awesome!! 🤗
Thanks a lot for your help, aravsanj!