ando_337 Posted June 13, 2021 Share Posted June 13, 2021 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! 🙂 Link to comment
aravsanj Posted June 13, 2021 Share Posted June 13, 2021 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> Poppyseeds 1 Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
ando_337 Posted June 14, 2021 Author Share Posted June 14, 2021 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; Link to comment
Solution aravsanj Posted June 14, 2021 Solution Share Posted June 14, 2021 (edited) @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 June 14, 2021 by aravsanj Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
ando_337 Posted June 14, 2021 Author Share Posted June 14, 2021 Awesome!! 🤗 Thanks a lot for your help, aravsanj! aravsanj 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment