Header image load acting strangely

[logoglo]

Hi there…please see here:

Official Website of Andrew Kirsch

I have the background parallaxing, but on 1st load, or each time you refresh, there is a flash of the background image in a different position. I know I have some css on there to make it work on different sized screens, but I tested it without the css too, and its still flashing.

Hope you can help.

[ruenel]

Hello @logoglo,

Thanks for writing in! Can you please temporarily remove this CSS block while we are troubleshooting?

@media(max-width:1200px){
    .x-bg-layer-lower-image{
        background-position:center right -200px !important;
        background-size:auto 80% !important;
    }
}
@media(min-width:1400px){
    .x-bg-layer-lower-image{
        background-position:center right -150px !important;
        background-size:auto 90% !important;
    }
}

Please let us know once it is remove so that we can test the page again and investigate. It would also help if you can provide us your access to the site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[logoglo]

I have removed the code, and given access details in the secure note. It is more evident on smaller screens, but the desktop still does t, slightly.

Thanks.

[ruenel]

Hey @logoglo,

It is because you have left the background image size as “empty”.

You can use cover or contain. For more details about this property, please check this out:

• https://www.w3schools.com/cssref/css3_pr_background-size.asp
• https://css-tricks.com/almanac/properties/b/background-size/

Thank you.

[logoglo]

The issue is still there…I had the size on the smaller screens, and even now with the size added to the image for larger screens, is still doing what it was doing…https://andrewkirsch.info/wp-content/uploads/2022/07/f53aed1e-7ca8-40e5-a0ac-89e9ee11d130.webm

[christian]

Hey @logoglo,

Your Background Size should only be 150% or more to give the Parallax feature some room to work. It’s unlike the old method of parallax where CSS is used and it only scrolls vertically. The modern Parallax of the V2 (non-classic) element is powered by Javascript and it works well if the image is zoomed in and the excess parts of the image is what it uses for the parallax effect both horizontally and vertically.

Hope that helps.

[logoglo]

Hi, thanks, hmm, ok, but now the image isnt as sharp, and is too big on smaller screens, it doesnt look great. This also doesnt explain the strange flash load with the way I had it before…

I think I have come to a compromise, I have it looking like I want, with little flash (though there is still some)

You ought to think about having it so it works with the image set to cover, or 100%, having it zoomed in so much, doesnt look good.

[christian]

Hey @logoglo,

The Background Size needs to be more that 100% because the Parallax needs to have some wiggle room. If it does not have that, you’ll see the flash because it’s not optimal for its function.

We have a video by our dev team in the past which explains why the Background Size needs to be more than 100% if you’ll use Parallax. Regretfully, it no longer available.

That said, if you find your image is too zoomed in, you need to edit your image in Photoshop ir a free image editing tool.

Thanks.

[logoglo]

Understood, thanks.

[marc_a]

Hey @logoglo,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.