Header Image animation

Hi there,
I just updated my website here: https://www.dariosn.com
Is there a way to avoid the page to load without the fading in effect that shows background image first than header?
I don’t want the guests to see the background before than the header, I’d prefer it to be seen as they scroll down the page.

Thanks a lot,
Dario

Hello Dario,

Try disabling background image from Appearnace > Customize > Background Image.

Regards,
Kharis

I would like to keep the background image but as the page loads the website shows for a couple of seconds the background before than the other sections

Hello there,

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    body.custom-background {
      background-image: none !important;
    }

    body[data-elementor-device-mode] {
      background-image: url(https://dariosn.com/wp-content/uploads/2019/04/dario03.jpg) !important;
    } 

Let me know how it goes.

Regards,
Kharis

It works better but the background comes still a little late than the page
Thanks
Dario

Hello Dario,

Unfortunately there’s no code better than that. Because background image attached to the body loads immediately even we changed the selector to body[data-elementor-device-mode], which is done by Elementor when the page completely loaded. I think you should enable preloader plugin to trick this situation.

Regards,
Kharis