Archived topic
text box with opaque background
5 replies · Started by john on January 24, 2018
I want to place text over a background image in a section where I do not want to enhance readability by adding a background color. How do I create a text box with an semi-transparent background so that the image shows through. There may be 2 or 3 of these on a single section with a full width image. I only want to do this on my static home page using sections.
Here's an example: https://www.feelspace.de/
Hi John,
If I understand this correctly, you can do this to create the same text box as the example:
<div class="text-box">TEXT BOX CONTENT HERE</div>
Then style it with CSS:
.text-box {
padding: 5px 10px;
background-color: rgba(240,240,240,0.75);
}Please explain where to insert this code. It's for the first section on a page. Also there will be more than one text box. Thanks.
The first part with the <div> will be directly into the content (text editor)
The second part is CSS which can be added using one of these methods: https://docs.generatepress.com/article/adding-css/
Each text box has to be its own <div>.
Thanks. I'm gradually getting there, realizing I need different DIV names for differently styled text. What's got me confused is the section padding in conjunction with the Lightweight Grid Columns. I currently have a 5% empty column, followed by a 35% column containing a text box, then 60% column containing a second text box (different div). The right text box is difficult to position without affecting the overall height of the image. Do I keep experimenting with the image padding or is there a science to this?
Not sure what you mean?
I see you are currently using 20-80 which looks good to me.
If it's unrelated to this topic can you open a separate question?
Thanks!
