I’ve been trying to recreate this the following but I’m getting stuck. I had a board for my website and a board for my main hero.
I’m thinking to achive what I’m looking for I need the following structure:
*Main hero - The following are children’s elements.
* Hero section content and their child elements.
* Image but this is position absolute.
Here’s what’s I’m looking to recreate below:
How would you approach this design or are their similar designs I can view?
Here’s the link to the design I found - FlowPro — Air Conditioning Heating & HVAC Services Elementor Template Kit (pinterest.com)
I’d love to be able to created image overlay effects easilt if I can everytime. 
I would apply the image as a fill (background) on your main board that contains all the other elements. That way, the image will always fill all of the background.
Many thanks, I’ll have a look at the docs and video to see how. Would it be ok if I look first before tellling me how. If I’m doing it myself it’ll help what I’ve learnt to stick
1 Like
Hey Laura
It was really easy to do, thanks. Just in case anyone else runs into the same problem.
There two steps:
- Click on the colour under the fill field and a colour panel opens.
- At the top of the colour panel there should be a drop down menu. The default option is solid. Click on the drop down option and select image.
Many thanks again Laura.
1 Like
IMO keep aspect ratio ticked as it seems to be the same as “object-fit: cover;”
A use case would be say you have a rectangle image but you want to use the same image as an overlay for a tall board. Keeping the aspect ratio ticked, prevents the image from distorting.
Hopefully someone find this useful if they are deciding if they should untick keep aspect ratio.
