Image shift on home page

Support
#1

Dear Themeco. Can you help me solve the problem of why the main image at the top of my homepage shifts by a few pixels as it finishes loading? I asked this before (sorry, I can’t see the post now) but I never actually resolved the issue.

See the dragon image at sips.asia.

Many thanks

Andy

#2

Hey @AAlcock,

I have checked your website, It looks like custom css for background position loads just after page completes loading. Can you share us your wp-admin login details(Using Secure Note) so We can take a closer look into it. There are some errors in chrome console, looks like video is being loaded from localhost. Can you please check?

Regards

#3

Hi there,

The shifting is unavoidable since the parallax calculation is done by javascript based on container’s height ( height changes as the content and styling loads). Unless you’re going to fix the height of that section, then it will make the background positioning the same upon load.

Example, before loading, the background position is 0 0 (x, y) then after loading and the height is calculated, it becomes 50% 14px.

    margin: 0px;
    padding: 55px 0px;
    background-image: url(http://sips.asia/wp-content/uploads/2017/03/Dragon-final-2000px.jpg);
    background-color: rgb(147, 195, 220);
    background-position: 50% 14px;

The positioning changes as you scroll too, so we can’t just fix the positioning upon load. How about rev slider and use its parallax feature?

Thanks.

#4

Hello.

Thanks very much. I’m a relative novice, so I don’t really understand exactly what you’re telling me to alter! But I’ll have another look and if I can’t figure out what I need to amend, I’ll perhaps try the rev slider option.

Regards
Andy

#5

You’re welcome, Andy.