How to add a color overlay to a background image in MT GUI

Tagged: 

Author Posts

robertlo March 4, 2017 at 8:12 pm

Is this posible in the MT GUI, or does it have to be done with custom css, and if with custom css, why isn’t this working for me?

See http://new.liftmoore.com/1032-p/

The background of the page title is .hydraulic-cranes-page-title

.hydraulic-cranes-page-title {
background: linear-gradient(
rgba(0,0,0, .5),
rgba(0,0,0, .5)),
url(‘/wp-content/uploads/aerial-view-of-warehouse-exterior.jpg’);
}

That doesn’t do anything when added to custom css area in MT.

But other than that, can the GUI apply a color overlay to a background image?

Sebastian March 6, 2017 at 10:45 am

Hi Robert,

You can’t currently apply a color overlay to images via the GUI options, because Microthemer’s gradient/background image style options aren’t flexible enough yet. They will in a future update. Right now, we’re near the end of a big update to the targeting options.

However, the CSS trick you’ve applied for adding a gradient, should work via the custom code options. The problem is that you’ve targeted the wrong element. You actually need the child element, which BB has applied the background image to using the following selector:

.fl-node-58bb101f32718 > .fl-row-content-wrap

That should work now. Please let me know if you need further assistance.

Cheers,
Sebastian

robertlo March 6, 2017 at 5:45 pm

Sebastian,

That does the same thing as I had before. It applies the gradient, but not the background image itself, and I tried with both relative and absolute paths for that image.

Also, I think the 58bb101f32718 in .fl-node-58bb101f32718 is targeting that part on a specific page, whereas I need to target the row on any page that I add my custom class to.

Any ideas? I have a workaround, but just wondering what your thoughts are.

I will also send an email to BB to get the fix from them, since it’s just custom css at this point, and not an MT issue.

Sebastian March 7, 2017 at 9:53 am

Hi Robert,

1. Could there be a problem with the syntax in the background image?

url(‘/wp-content/uploads/aerial-view-of-warehouse-exterior.jpg’);

It could just be a quirk of pasting in this forum, but I notice that backticks (`) are used instead of single quotes (‘) in the url() path. This could invalidate the rule. When I tested the gradient overlay method on your site via Chrome’s inspector, it worked.

2. You can set the background-image on any element with a custom class via Microthemer. But you will need to remove the background-image you set via Beaver Builder, because if it is set on a child element of .hydraulic-cranes-page-title, it will completely obscure the one you set via MT.

I hope that helps. Please let me know how you get on.

Thanks,
Sebastian

robertlo March 7, 2017 at 4:59 pm

Sebastian,

BB replied with this:

********************************

How we’re doing it is we’re assigning the overlay to the after pseudo element. Try the snippet below instead and see if it works for you. 🙂
/* Set background image for the row */
.hydraulic-cranes-page-title .fl-row-content-wrap {
background-image: url(/wp-content/uploads/aerial-view-of-warehouse-exterior.jpg);
}
/* Set overlay color for the background image */
.hydraulic-cranes-page-title .fl-row-content-wrap:after {
content: ”;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background-color: rgba(0,0,0, 0.5);
}

And that would be correct! You can’t use global rows for now since its content would be static. We’ll be releasing Field Connections soon which allows you to retrieve post meta data and use it as content, allowing those global elements to have dynamic content.

********************************

But that doesn’t work either, as it applies the overlay on top of the contents of the column with the background image I’m adding and overlay to. I’m waiting on an update from them.

robertlo March 8, 2017 at 1:32 am

BB gave me this. It worked:

/* Set background image for the row */
.hydraulic-cranes-page-title .fl-row-content-wrap {
background-image: url(/wp-content/uploads/LiftMoore-crane-arm-up-close.jpg);
background-size: cover;
background-position: center;
}

.hydraulic-cranes-page-title .fl-row-content {
z-index: 1;
position: relative;
}

/* Set overlay color for the background image */
.hydraulic-cranes-page-title .fl-row-content-wrap:after {
content: ”;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background-color: rgba(0,0,0, 0.5);
}

Sebastian March 8, 2017 at 9:47 am

That’s great. They went with the option of fully covering the element with an ::after pseudo element. I’m glad you got there in the end. Thanks for sharing.

You must login or register to reply to this topic.