Parallax problem

Support
#1

Hi there, I have inserted a content band element with parallax, but I can reach a satisfactory result with background image that appears grainy.

https://lesgomines.it/chi-siamo/

The starting image is not so big, so we have decide to add some white part on the edges to obtain a greater width. The image now measures 1980px of width, but it appears grainy.

So, the problem is the width of the image or some other kind of issue?

I hope you can help me, thank you very much.

#2

Hi,

You can try adding this in the style field of your content band.

background-size:contain !important;

Hope that helps

#3

I have already tried that solution, but it change the behaviour of parallax and it won’t work correctly on that page. The parallax image appears too late.

So I have tried to change background-position to 50% 100% and the image appears correctly. But having modified the image with two white bands on the sides, on the smaller screen the white bands become visible. On other side, if I use the original image that it’s not so big I think it will not render good also with contain.

So, is there some rules to respect about image size?

Thanks

#4

Hi Alessandro,

The grainy effect is because the image is small, you only increased its size by adding white area but it still small. Try uploading a much bigger image instead of adding white, try either wider or taller image.

The parallax background will be scaled up to create a negative clipping on it, the clipping creates a good moving effect in parallax, that’s why adding contains has a negative effect since it changes its scale back equal to the container (either width or height).

Thanks!

#5

Ok thank you. But for example, what width do I have to use? Is there a minimum width to obtain a good effect?

Thanks

#6

Hey Alessandro,

The minimum width would be equal to the container width so for a boxed layout, it should be equal to the site max width.

If you’re in a fullwidth layout where the screen is your container, the minimum would be the x or horizontal resolution you support. For example, if you support 1920 x 1080px screens, the minimum recommended would be a 1920px image.

The height of the image would depend on what part of the image you want to show in the parallax effect. The taller the image, the more you need to scroll. The video below is not entirely related to parallax but I believe it might help understand the relation of the background image to the container.

Hope that helps.

#7

Ok, now it’s more clear. Thank you very much

#8

You’re welcome.

#9

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