Text overlay with photo background

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Plugin / Text overlay with photo background

This topic is: resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #105835

    jcduron
    Participant

    I’m trying to replicate the text overlay on http://www.optiforms.com/ (Your Optical Solutions Partner area) – I’m adding this to http://optiformsinc.com/

    I know how to add an image as the background and use a text element to add the text but can you tell me if there is a way to create the dark grey overlay with the fixed area? If this is a code solution, could you provide any snippet to get me going?

    Thanks

    #105863

    Ben Carlo
    Keymaster

    Hey Jcduron,

    You’ll first need to set that row to fixed width content. You can then add a class to that same row, e.g., fl-content-row-background and add the CSS snippet below.

    .fl-content-row-background .fl-row-fixed-width {
      background: rgba(0,0,0,0.75);
    }

    Is that what you’re looking for by chance?

    Ben

    #105868

    jcduron
    Participant

    Thanks Ben for the quick reply and the code. Any chance this could work with a full width row?

    I really wanted the background image of the jet to span the full width of the browser. If not, is there a way to trick the background image to display at full width using the fixed row?

    I know I’m asking a lot, but you guys are code ninjas right? 🙂

    #105902

    jcduron
    Participant

    So I played around a bit and this code seems to be doing the trick:

    .fl-overlay-text .fl-row-full-width {
    position: center;
    width: 90%;
    background-color: black;
    opacity: 0.6;
    }

    http://optiformsinc.com/ – Take a look if you have a second to confirm you see a dark overlay for the text block.

    #105916

    jcduron
    Participant

    Well bummer, the company liked it more without the colored overlay on the text so you won’t see the results if you go to the page.

    But thank you for guiding me on the code!

    #106037

    Ben Carlo
    Keymaster

    No worries! And just to answer your question though, what I meant was just to change the content width to fixed, you can leave the row to full width. Check the screenshot below for reference. 🙂

    View post on imgur.com

    Ben

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘Beaver Builder Plugin’ is closed to new topics and replies.