[Resolved] Parallax image in section jumping/skipping (need centred)

[Tristan]

Hey there,

I’ve placed a background image in a section towards the top of my page and used the parallax option.
I also want these BG images centred when scaling, so have added some CSS, eg:

.bannerabout {
background-position: center;
}

The problem is when you start scrolling the image skips/jumps into position. Is there anyway to rectify and keep the image centred?

Example is at: themotionward.com/about

Thanks a lot

Tristan

[Elvin]

Hi Tristan,

The script for the background parallax controls the background-position-y. Adding another background-position code directly conflicts with it.

Unfortunately, there’s no filters used on section parallax so we can’t control it directly.

One simple alternative is using simple CSS parallax here: https://www.w3schools.com/howto/howto_css_parallax.asp

One more alternative is the sections parallax feature off and use third party JS libraries that controls parallax’s “from” and “to” effects using css class selectors.

My personal recommendation based from experience is BasicScroll – https://basicscroll.electerious.com/

It’s fairly easy to use. You just need to add the script library to your footer and add a JS snippet that controls your css class.

[Tristan]

Thanks very much for the response Elvin. In fact I used the BG-y code you just posted and it seems to have done the trick:

.bannerabout {
background-position: center;
background-position-y: 0%;
}

Not sure if it’s correct but it looks like its working!

Cheers
Tristan

[Elvin]

Nice one,

No problem. We’re glad it works for you now.

[Author]

Posts