Jumpy scrolling over header after adding CSS

Hi there.

I wanted the background images to be centered for the parallax effect so I added the following CSS.

    .panel-row-style {
        background-position: center !important;
    }

It worked perfectly. However, I do not want the header background image to be centered, I want it to begin at the bottom. To do this I added the CSS

    .slides-container .slide-item {
      background-position: bottom !important;  
    }  

It also worked well, however, now when I open the website and scroll down it “jumps” down before scrolling smoothly. One weird thing is when I view the header in the Customizer it scrolls smoothly without the jumping.

Here is my site.

Any idea how I can fix this?

Thanks,

Travis

Hello Travis,

Please try this CSS code:

.panel-row-style[data-hasbg="hasbg"] {
  background-position: bottom center !important;
}

Regards,
Kharis

Hey Kharis,

Thanks for the code, but it didn’t work :frowning:

I wasn’t sure if I should enter it instead of, or in addition to the code I listed, I tried both but both didn’t work. When I scroll down the header is still jumpy. Any other ideas?

Thanks,

Travis

Hey,

So I realized this is only an issue when I’m logged in. If I log out and view the website as a guest, this does not happen. Since my visitors won’t be affected, I guess the issue is resolved :slight_smile: