Text overlay with photo background

Beaver Builder
1

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

2

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

3

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? :slight_smile:

4

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.

5

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!

6

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

View post on imgur.com

Ben