gradient overlay on background image

This topic contains 5 replies, has 3 voices, and was last updated by  mavriq 8 months ago.

Author Posts

hashimwarren

I can make a gradient, and control its opacity – awesome!

But I can’t make the gradient appear over a background image.

I’m looking to emulate this image:
gradient overlay on background image


hashimwarren

This is an example of the background image, a grayscale geometric background

https://drive.google.com/file/d/0B8BTN_CHjEfnaktqRUdWV1J3MEE/view?usp=sharing


Sebastian

Hey,

The GUI properties for background-image/gradient don’t currently support having the background-image underneath the gradient. So you would need to add the following via the custom code tab:

 background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')

Replacing the second line with your opaque gradient.
And the 3rd line with the URL to your background image.

You may wish the create the gradient in Microthemer and then copy the code from the Generated CSS option under the View menu. Tip: you can use the Ctrl+F keyboard shortcut to find the gradient in the generated CSS.

The background-image and gradient fields will be updated in the near future as part of the style options overhaul. But I hope this helps for now!

Cheers,
Sebastian


mavriq

I was bitten by this today as well. It is pretty common to overly a gradient on a background. Would be a nice feature to have.

EDIT: Actually the workaround isn’t working for me. If I add the custom code it gets changed back to being placed after the image as soon as I navigate away.

EDIT2: I see eventually this was fixed. However, there is still an issue. The CSS generated places the gradient after the URL. In chrome, it results in the gradient being under the image.

this is what is generated

background-image: url("/wp-content/uploads/2021/03/image.jpg"), linear-gradient(rgba(48,173,23,0.5), rgba(48,173,23,05));


Sebastian

Ah yes, I see what you mean. I think for now the only workaround I can suggest is to use the full code editor for this particular selector (View > Full code > CSS).

In order to support any configuration of background images and gradients, I need to merge the gradient fields with the background fields and allow for multiple rows. This will take a bit of time, so can’t be implemented as a quick fix for your issue unfortunately. I’m behind schedule, but it’s still a very high priority.

Cheers,
Sebastian


mavriq

Thanks. Sounds Good!

You must login or register to reply to this topic.