- This topic has 4 replies, 2 voices, and was last updated 12 months ago by Elvin.
October 18, 2020 at 2:14 pm #1494769Mark
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?
P.S. My site is at staging1.hardyness.comOctober 18, 2020 at 2:29 pm #1494778ElvinStaffCustomer Support
To clarify, is this the image w/ overlay you’re pertaining to?
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/
A wise man once said:
"Have you cleared your cache?"October 18, 2020 at 2:55 pm #1494788Mark
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.
MarkOctober 18, 2020 at 2:56 pm #1494789Mark
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.
MarkOctober 18, 2020 at 3:36 pm #1494811ElvinStaffCustomer Support
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
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.
A wise man once said:
"Have you cleared your cache?"
- You must be logged in to reply to this topic.