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

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


ando_337

Question

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! 🙂
 

Bildschirmfoto 2021-06-13 um 18.18.24.png

Bildschirmfoto 2021-06-13 um 18.17.43.png

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

@ando_337
I believe what you want is:
1. A  transparent colored box
2. Solid white colored text in it
3. A border that is fixed at certain distance away from the box so it will peek the image below.

Try replacing the code with the one below:

<div id="border">
<div id="box"> 
<div id="text">
<h3>Wenn der Blick in die Sterne Zuhause bedeutet...
<h3>

</div>
</div>
</div>

<style>
#box {

background: rgba(0, 0, 0, 0.3);
padding: 20px 40px;
}

#text h3 {
color:white;
}


#border {
border-color: black;  
border-width: 2px;  
border-style: solid;
padding:5px;
}

</style>

I hope I had all the right assumptions and the code is working.

Edited by aravsanj

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0

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>

 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0

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;  

 

Bildschirmfoto 2021-06-14 um 10.34.45.png

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...