How to center parallax backgrounds with stellar.js when scaling

Question

I'm experiencing some issues with parallax background images.

I'm working with this template. As you can see, in the home page there are 2 divs exploiting stellar.js (i.e., .fh5co-cover and #fh5co-started ). All seems fine with a computer resolution but if I try to visualize the website with a Phone resolution (e.g., simulating the iPhone7 Plus rendering through Chrome) the background image in .fh5co-cover is not centered. Moreover the background image in #fh5co-started displays grey borders when you scroll the page.

Is there a way for centering background images and for avoiding those annoying grey borders at small resolutions?

Answer 1

Set the background position x to 50%:

background-position-x: 50%;

In here:

@media screen and (max-width: 768px)
.fh5co-cover {
    heifght: inherit;
    padding: 3em 0;
    background-position-x: 50% !important;
}

PD: important! because the position is being changed in js by whatever plugin you are using.

About the gray border, couldn't find it so i guess was just a bug on your browser