image background overlay ONLY behind text

Hi there,

might be worth checking with Elementor to see if their slider has an overlay option.
If not maybe try this CSS:

.elementor-slides .swiper-slide-inner {
    background-color: rgba(0,0,0,0.5);
}

As a side note - that site is not running GP ......

Sorry David, I mistyped the URL: http://hardyness.michianait.net

I think autocorrect changed hardyness to hardiness.

Thanks for your reply.

Elementor's slider does have an overlay, but it seems to overlay to whole image, not just the text.

In the CSS you sent, does .slider-slide-inner just serve as an overlay to the text itself, or the entire image? I'm not that familiar with "-inner".

Thanks,

Mark

You can try something like this for the heading:

.elementor-slide-heading {
    background-color: rgba(0,0,0,0.5);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Please be mindful that this is the support forum for GP only and questions like these should be answered by Elementor's support.

Hi David and Leo,

It’s not that elementary doesn’t have a background overlay for the slides, it just that it covers all the slide - not just the text.

I was hoping that GeneratePress Premium might have some options for backgrounds behind a text only.

I believe my CSS above should work for the text only:
https://generatepress.com/forums/topic/image-background-overlay-only-behind-text/#post-1454107

I was hoping that GeneratePress Premium might have some options for backgrounds behind a text only.

GP Premium cannot control content coming from page builders.

Thanks Leo,
I will try it.

Mark

No problem :)

That worked like a charm. Thanks!

Mark

No problem :)