Parallax scrolling from top

Support
#1

please see link above

I would like the parallax to start scrolling from the very top of the image rather than cutting the gent’s head off.

How can I achieve this effect?

#2

Hello There,

Thanks for writing in! To resolve your issue, please edit the page back in Cornerstone and make sure that the background image position is top and center.

Hope this helps.

#3

thank you so much for your prompt response.

This still does not start the parallax from the very top of the image :frowning:

Also, I would like to have the parallax scroll through ENTIRE image as I scroll down rather than a fraction of it.

How may I achieve these two crucial effects:

  • start the scroll from the very top of the image
  • scroll through the entire height of the image

thank you for your help

#4

Hello There,

Thanks for writing in! You must understand how background images works first. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In Cornerstone, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

The parallax effect relies on the background image cover and the parallax effect will then have to change the position of the background as you scroll the page.

Start the scroll from the very top of the image

  • this might not be possible because the image need to adjust depending on the width and height of the container or section.

Scroll through the entire height of the image

  • This is only possible if the section container has almost the same height as your background image. I can see that you are using a portrait image in a fullwidth section. This might not be possible.

Hope this helps explain it briefly.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.