[Resolved] image background overlay ONLY behind text

[Mark]

I would like to put a background overlay only behind the text over an image so that the whole image doesn’t become darkened; I only want a darker background (like a shade of black behind white text) behind the text – not The whole image.

Is this possible to do?

I have a GP site at hardiness.michianait.net. As you can see on the slideshow on the home page hads white text over the slides. I would like to put a darker background just behind the text.

Thanks,

Mark

[David]

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 ……

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

[Mark]

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

[Leo]

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.

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

[Mark]

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.

[Mark]

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

[Leo]

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.

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

[Mark]

Thanks Leo,
I will try it.

Mark

[Leo]

No problem 🙂

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

[Mark]

That worked like a charm. Thanks!

Mark

[Leo]

No problem 🙂

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

[Author]

Posts