[Support request] text box with opaque background

Home Forums Support [Support request] text box with opaque background

Home Forums Support text box with opaque background

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #478998
    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/

    GeneratePress 2.0.2
    #479221
    Leo
    Staff
    Customer Support

    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);
    }
    #479270
    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.

    #479298
    Leo
    Staff
    Customer Support

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

    #479308
    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?

    #479576
    Leo
    Staff
    Customer Support

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.