-3

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
floatingpurr
  • 7,749
  • 9
  • 46
  • 106
  • possible duplicate of this; https://stackoverflow.com/questions/15930504/css-background-image-centered-with-stellar-js – Curt Husting Jan 05 '18 at 19:08
  • 4
    Hi @floatingpurr, please include a [mcve] in your question. – TylerH Jan 05 '18 at 19:08
  • 1
    @Curt is not a duplicated. the link you gave him is an static background image, his is a parallax background image – Luis felipe De jesus Munoz Jan 05 '18 at 19:10
  • When I checked out the template link I also saw the parallax images shifted to the left, As @markdalgleish mentions in his answer, try to disable horizontal parallax and see if that fixes your centering issue https://stackoverflow.com/a/15939327/2981242 – Curt Husting Jan 05 '18 at 19:13
  • Hi @TylerH, in the link of my question you can see the problem in action – floatingpurr Jan 05 '18 at 22:47
  • Hello @Curt, thanks for your observation. I think this is not the duplicate. Besides, I've already tried the solution you've mentioned before posting. – floatingpurr Jan 05 '18 at 22:48
  • 1
    @floatingpurr You need to include a [mcve] in the question itself. Your question loses its value when the link dies. – TylerH Jan 06 '18 at 23:31

1 Answers1

0

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

Luis felipe De jesus Munoz
  • 7,454
  • 2
  • 33
  • 53
  • Great! Worked like a charm! PS: while you scroll, you can see the grey border of the background in the `
    `, indicatively under the button _"I am attending"_
     – floatingpurr Jan 06 '18 at 00:09