Streaming live at 10am (PST)

Background images move when scrolling down page

Hi there! I recently launched my website, and for some reason the background images move around. One does a weird thing with the top and bottom of the image appearing on top of each other (the bottom of the image on the top) and the other displays the background placeholder image. These are fixed images. I just want a basic hero banner on each of these pages. The two banners do not share a class, so I cannot figure out why they both have the same problem.

I have selected “fixed” and “not fixed” and played around with the different tiling options and the problem still persists.

Page 1:
Page 2:

Thanks in advance!

Is anyone out there? This is really driving me crazy. It’s not just parallax movement; my hero banners look really bad!

Hello @smittenkitten,

It looks like you have two container on top of each other, is that on purpose? did you wanted to make an animation with two images? If you share your read only link I can maybe better assist you with this issue.

Here’s the read-only link:

I don’t see two containers when I turn on x-ray mode. Thanks for responding!

You have a “move on scroll” interaction on the image. It seems to work fine when that is removed.

Hello @smittenkitten,

Yes, like mention by @Fonsume you have an interaction that is moving your “Bg image blog” div and that section behind it has an image place holder. You don’t have to place a div block over the section to have a hero image, you can just delete the “bg image blog” and set the same picture as a background image on the section. I hope this helps, let me know if you have any more questions.

Thanks! That worked. You wouldn’t believe the hours I spent trying to troubleshoot this myself.

1 Like

Hello @smittenkitten,

I’m glad I was able to help you. This is what the forum is for. Best of luck with your projects.