CSS to set all section images to Cover in elementor

These are the classes available on the target section

elementor-element
elementor-element-154b4370
elementor-section-height-min-height
elementor-section-stretched
elementor-section-boxed
elementor-section-height-default
elementor-section-items-middle
elementor-section
elementor-top-section

Select allOpen in new window

These are the classes on the section that immediately follow it

elementor-element
elementor-element-740d3daa
elementor-section-stretched
elementor-section-boxed
elementor-section-height-default
elementor-section-height-default
elementor-section
elementor-top-section

Select allOpen in new window

As you can see they both use the same classes - the ones that are different are specific to the section rather than identifying a particular type of section.
This is the CSS rule that is setting the background-size

.elementor-65359 .elementor-element.elementor-element-154b4370:not(.elementor-motion-effects-element-type-background), .elementor-65359 .elementor-element.elementor-element-154b4370 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-image: url("http://146.66.113.175/~techgard/wp-content/uploads/2019/08/header-interior-h384.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
}

Select allOpen in new window

.elementor-65359 is linked to the page ID on the other page it is .elementor-65367 - i.e. per page settings.

There are various things you could try but it would depend on how your other pages are setup. For instance you could do this

.elementor-section-wrap section:first-child {
  background-size: cover!important;
}

Select allOpen in new window

That should work unless there is an instance where you have a section with a background image that is not the first in the .elementor-section-wrap section - or where you don't want it to cover.
I would go with that first and see if that works for you

You rock! That's what was messing my thinking up, was each section was named differently. If this works, I will track you down and buy you several beers.

Hi,

per experience when setting to cover it's not working well with all kind of images.
and when resizing depending on how you set it it may not render correctly.
Let say you set to center but the image interest is located at the left, it won't be displayed ...

I do prefer to avoid this method.

.myclass {
    background-image:    url(images/background.svg);
    background-size:     cover;                     
    background-repeat:   no-repeat;
    background-position: center center;        
}

Select allOpen in new window

What I'm using is revolution slider with their editor for all header and slider  https://revolution.themepunch.com/

Ok, unfortunately that didn't work. Another idea?  Thanks!

Ok, unfortunately that didn't work. Another idea?  Thanks!

Can you show me where it didn't work?

I added the code to the Style debugger in the console - and it applied the style successfully.

Hi,

Here some instructions i'm not familiar with Elementor
https://elementor.com/blog/website-background-images/

>> Can you show me where it didn't work?

I've got it live in the theme customizer, additional CSS, but I still see the issue here for instance: http://146.66.113.175/~techgard/products/

in mobile view.

I owe you that beer! Thanks!

You are welcome.