CSS to set all section images to Cover in elementor

Melody Scott
Melody Scott used Ask the Experts™
on
Hi, http://146.66.113.175/~techgard/services/operation-maintenance-and-monitoring/  and  http://146.66.113.175/~techgard/services/implementation-and-integration/

On the header section, the blue part with wording, on the first page I've changed the Elementor section so the size of the image is set to cover.

I have a lot of pages; is there a global CSS I can use to ensure they are all set to cover? Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Open 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

Open 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;
}

Open 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;
}

Open 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

Author

Commented:
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;        
}

Open in new window


What I'm using is revolution slider with their editor for all header and slider  https://revolution.themepunch.com/
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Ok, unfortunately that didn't work. Another idea?  Thanks!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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/

Author

Commented:
>> 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.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
It did work in that the style was applied (see below). Now look closely at the image you will see that the style you have applied is set to trigger like this (at 600px) - so on mobile it is not activating - there is the problem
@media (min-width: 600px){
  .main-navigation .menu > li > a {
    padding: 6px 0;
    text-transform: none;
  }
  /* make image cover on all headers*/
  .elementor-section-wrap section:first-child {
    background-size: cover!important;
  }
}/

Open in new window

ss184.jpg

Author

Commented:
I owe you that beer! Thanks!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial