[Support request] text box with opaque background

[john]

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/

[Leo]

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);
}

[john]

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.

[Leo]

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

[john]

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?

[Leo]

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!

[Author]

Posts