[Support request] Aspire starter site: images with overlay

[Mark]

I have a GP site (created with the Aspire starter site) using Elementor Pro.

It seems (in Aspire) that the images have an overlay on them to make them darker. However, in an Elementor image widget, I don’t see how to add a background overlay.

I can only see how to do an overlay if the image is a column background image – the size of which seems to depend on the adjacent column text height.

How are these Aspire-based images created with a background overlay?

Thanks,

Mark

P.S. My site is at staging1.hardyness.com

[Elvin]

Hi,

To clarify, is this the image w/ overlay you’re pertaining to?
https://share.getcloudapp.com/6quPY9xd

If so, this is set outside of Elementor. This particular image and its overlay is on the page hero which is added on Aspire by default through a Header Element named “Home Page Header” on your Appearance > Elements.

To know more about Header Elements, please refer to this article: https://docs.generatepress.com/article/header-element-overview/

[Mark]

Elvin,

No, that is the page hero on the home page. I’m talking about the ones further down where there is an image in the left hand column, and the text in the right hand column. This is followed by another section that has the text in the left hand column, followed by the image in the right hand column. These images seem to have background overlays, but I don’t know how you create them.

Thanks

Mark

[Mark]

Elvin, to be more clear, I’m talking about the series of three sections: Wellness training, Personal Training, and Group Exercise. Each have an associated image in the opposing column.

Mark

[Elvin]

Oh right, those are contents hence, edited in Elementor.

Elementor’s Image widget doesn’t work the same way as an image added through CSS’s background-image(columns w/ images) property because it is an actual <img> tag.

This means, you can’t do a background: linear-gradient(), url(); on it.

However, we can do workaround.

You can try adding a background color on the Advanced tab of your Image widget, and then reduce the opacity of the image itself on its Style tab. You should be able to do a similar effect to having a background overlay.

Alternatively, you can play around Image widget’s CSS Filters on its Style tab too.

[Author]

Posts