Header Background Image flickers when loading

Here are my sites . https://www.tom-abraham.com/ and https://www.sabrina-abraham.com/en/. In both site when loadind and when switching to different language background image flickers . I have enabled parallax effect and background attachment is set to fixed,background position is default, background repeat is no-repeat and background size is set to cover . I have built the site using elementor plugin and ocean wp theme . Can anyone help me fix this issue?

Hi @rabbitrun978 and welcome to the forums.
Upon inspection of your page I found your image to be an HTML img element and its container to have a class of elementor-image. Having opened the inspector and focused on the HTML element then I went to change the language and found that when you do so the whole page rewrites itself, meaning the img element disappears until the page is rewritten and hence the flicker. I’m afraid there are no easy options, or at least I believe there aren’t…
Perhaps the easiest would be to get rid of the img element and try and use CSS instead, applying a background to the body element. This way the image may be preserve while the page is re-writing.

Hope this at least gives you some direction.

All the best,

Andres

1 Like

If you run your site through gtmetrix.com you’ll find several suggestions to speed up your site. It will also give you optimised versions of several of your images. There are also a few places where you are serving images over HTTP even though your site is served over HTTPS.

Speeding up your site may not be the complete answer, but it should help.

2 Likes