How to get parallax scrolling effect

Support
#1

Hi, I’m not getting a proper effect when using Parallax. The image scrolls only a bit and it’s not showing the full image when scrolling down, just a small nudge.

I used 1920x1400 px image, cover & center position, 150% (which made the image looks blown out), add min-height of 400 px in the inline css. I just want the image to scroll full height like here. https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm.

Kindly help.

#2

I want to achieve this effect: https://theme.co/cornerstone/elements/

in the “Alignment” section.

#3

Hi There,

Thanks for writing in! You can follow the steps below.

  • Create a new section in Cornerstone and click on the inspect icon.

  • Under the Setup section, click the Advanced checkbox.

  • Then you will see options below to set a parallax background and it’s options.

Hope that helps.

#4

Hi. I used these settings already. It shows a blown out (zoomed) image and a small nudge when scrolling down (not the whole image). It’s not showing the effect as shown in the links I posted

What I want to achieve is for the image to scroll (not zoomed) in the predefined section. I added height:400px; background-attachment: fixed; in the inline css but it’s not working as expected.

#5

Hey @arufi,

The links you’ve given us uses an old CSS parallax effect. Since version 1.2.0 of Pro, the parallax feature has been improved to get closer to the real parallax effect.

To achieve what you need and if you’ve added the image in the lower layer background, please add this CSS in your page.

.x-bg-layer-lower-image {
  background-attachment:fixed;
}

The upper background layer’s class is x-bg-layer-upper-image.

Watch https://youtu.be/3E9l2DbAOLA to see how it works.

Thanks.

#6

Hello christian,

my I jump into this topic, because I have exactly the same problem. If I use parallax without css, the effect is just seen with more than 150% but the picture looks blown up (I have two pictures in half columns at the bottom of the page https://gomarx.de/ ).
Now I added the css you wrote. The parallax is now working like I wanted it to be, but the picture is just seen a very small detail. So I put it to 100% and made it small. One picture is only 500x800 px (group), the other one 100 x 1600 px(woman), but both look terrible.

What can I do? I send you my data so you can have a closer look, in the next private message.

Thank you so much!
Kerstin

#7

Hey Kerstin,

You said your image sizes are 500x800 and 100 x 1600 px. Those sizes especially the widths are very small. If you’re viewing from a 1366 or even 1024px screen, those images will be pixelated (blurry). Generally, it is best to use 1920 x 1080px and taller.

Thanks.

#8

Hi Christian,

I have the images in a 1/2 column, thats why they are so small.
I made them smaller than I had before just to test because they always appear blown up…

?

#9

Hi There,

Please add a bigger image.

Let us know how it goes.

Thanks

#10

Thanks. It works :thumbsup:

#11

You’re more than welcome, glad we could help.

Cheers!

#12

Hi. it appears that there’s an issue when viewing with mobile device (iPhone 7 using both Safari and Chrome). The image is blown out so much nothing can be seen. Strangely, it looks normal if using desktop and resizing the browser window. :confounded:

#13

Hello There,

This issue happens because of your custom height. 400px in small screens will make the image blown out. Please change it back to 100% and test it again in your iPhone 7.

Please let us know how it goes.

#14

Hi there,

sorry for answering so late.
I put images on my side with 1920x1080 and put the lower layer size to 100%,
but it’s still blown up.
What can I do?
Can you please have al look?
I already send you the login data.

Thank you very much and best regards Kerstin

#15

Hello There,

Thanks for updating in! Even if you set your image with same dimensions with your desktop screen, it will still be stretch out or blown out because of how the background image works. Please understand that when you set a background image, the background image size is set as cover to cover the whole section. To have a better understanding on how background images works, please check this out: https://davidwalsh.name/background-size

In the section ( and with parallax background), we use the background-image: cover; by default 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.

Hope this explains the background image property briefly. Thank you for your understanding.

#16

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