Update June 2022: Someone has posted a fix for this which is to insert the following code into the CustomCSS for the section:
selector {
background-size: cover;
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
}
So if you’ve done a lot of work with Elementor, you may have come across this issue in your travels.
You want to use the featured image as a section background – as I’ve done in the section above and if however you are using an archive or single post template then every now and then (randomly, after edits to the page) Elementor wont honour background image position for a dynamically inserted featured image as a background – specifically position: center-center, no-repeat, position ‘cover’. Instead the featured image seems to reset itself back to default settings including repeat-ing the image and you get artefacts as shown above at the top of this page.
(I manufactured that image above, but that’s what the end result looks like).
Going into Elementor Tools and choosing to Reset CSS is a temporary work around but it breaks again not long after. I’ve seen this on Chrome, Firefox, Siteground, Hostgator, and other environments. It points to some coding issue with the CSS (when it breaks you can view the CSS. and see the styles are lost).
The benefit of using the featured image as the dynamically inserted background is not only to produce the image background but of course so you can place text elements over the top, and then able to use the ‘boxed’ text alignment where the heading or content aligns to the left content position. In the example below I set image as background / center-center – cover and used the equivalent of boxed position which I’ve hacked into this blog post using padding for illustration:
My heading here
Left aligned to ‘boxed’ text position
As many report in a variety of bug reports including this one:
https://github.com/elementor/elementor/issues/4577
…..this issue has been outstanding for a long time and lots of ‘we can’t replicate this problem’ from Elementor support or (in my case recently) – ‘it’s likely caused by caching on your server’ (it wasn’t in my case after escalating to 2nd / 3rd level server support to confirm caching not running anywhere).
Elementor’s final recommended fix was for me to insert the image in the section not as a background but instead using the Featured image widget, or as a regular image widget and dynamically populate.
I thought I’d share a couple of settings and config that helped me make this a workable alternative because initially I thought it wasn’t going to be workable. For expert dev’s and CSS peeps no doubt this stuff is obvious or easy but it took me a bit of fiddling around to make this a workable solution so I thought I’d write down how I did it.
Firstly – stretching the image without messing with it.
To get the image to work full width in a section like a background – for me I wanted to use full width background and did not want gaps around my image or in the section – I made the section full width, no gaps:
I then dragged my image into the section – and applied these settings to the image widget:
Using a regular image widget, dynamically pull in the featured image.
To get the image to behave like a background :
- Width 100%
- Height: to your requirements
- Object Fit: Cover.
OK so we’re getting closer now.
But if we want to place text over it – we need to fiddle with negative margins:
My heading here
Shifted with negative margin.
It’s not exactly what I’d call an elegant solution but it works.
The other problem – full width background and boxed text.
So I hit another problem where I was using a dynamically inserted image in a right hand column of a 2 column layout with section at full width – and I needed to get the text to mimic a boxed layout. So if my layout was like this:
My heading here
….then the workaround above for inserting the featured image and setting to match the height of my section worked well enough, but because above we insert the image inside the content – then if we want a full width layout, this means setting the section to full width, no gaps – which pushes the left hand column’s content to far left of screen.
I hit issues then trying to get my heading to line up ‘left aligned’ in the ‘boxed’ text position and scale responsively at different screen / device sizes.
This CSS snippet in Custom CSS for that widget got me over line. for that:
selector {
padding-left: calc(50vw – 570px);
padding-right: 5%;
}
(where 570px is 50% of the ‘boxed’ (content) width of the site). So this is kinda unrelated to the elementor background image issue above – but the need to insert the image inside the content – meant that i was forced into full width layout triggering the content alignment issue.
Bit of a mess ay? I was not very happy with the issues this work around presents, in particular as it results from a feature from Elementor which doesn’t work as advertised (all of the time). It seems clear to me at least that
- section or column background
- in an archive template
- dynamically pulling in featured images
….doesn’t work as it should and I’m holding out hope that someone in Elementor will get around to fixing it properly. For now, I hope the above helps someone? No doubt others likely have more elegant work arounds, I’d love to hear about them so I can edit the article.
