Parallax image height and zoom

[costin]

Hi,

1)I’ve used the code below to increase the height size for my parallax here goo.gl/MNKX5h

/*Parallax height homepage */
.spb_parallax_asset.home-parallax {
height: 300px;
}

I wanted to have a 450px height but if I would have wrote 450 in the code I would have had a bigger height. 300px in the code is giving me a 434px or 460px height on the website (depending on the image). This behaviour is strange! I would like to have a fixed height but the image to move inside.

2) For the same parallax, I’ve uploaded 2 images but on the website they are getting zoomed. How can I prevent that please? One image is 1230×500 and the other 1230×450.

Thank you!

[Kyle – SUPPORT]

Please can you provide a link?

For point 2, it is because the parallax element has a property, background-size: cover; which causes the image to be zoomed in so that the height of the image is the same height as the viewport window.

– Kyle

[costin]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi Costin

The reason it works on http://www.arteceramica8008.lu/ is because the height of their images are 1217px, therefore the height of the image is always more than the height of the browser window, which means they do not have to zoom into the image to fill the height of the window.

Where as the height of your image is only 500px, so if I am viewing the site and my browser window is 800px high, your image would be zoomed in to increase the height from 500px to 800px. I hope I am making sense.

I have removed the background-size:cover; property so that you do not loose image quality, however I have had to change the image from fixed to stellar. Please check this and let me know if you are happy with it.

If you ever have issues with parallax again, please contact me directly as it will be due to the changes that I have made.

– Kyle

[costin]

What minimum image size (especially height) is recommended please so I can have normal parallax without any fixes?

Have you made changes just for the first parallax? I see that now the image is fixed and with smaller height. I’m aiming at having something like the website mentioned above…

So if the only fix is to have better images then please revert the changes and I’ll look for bigger ones.

[Kyle – SUPPORT]

Try find images with a height of at least 1000px.

– Kyle

[costin]

This reply has been marked as private.

[Kyle – SUPPORT]

Looks great to me!

The images will be cropped on the sides because the width is obviously greater than the height, there is no way to fix this. If you wanted to show the full width of the image, then the height would not be enough to fill the browser window.

– Kyle

[Melanie – SUPPORT]

Hi, the ideal image width for your parallax section would be 1230px, since that’s the width of your website.

Cheers

[Robquinn]

Hi I have read all the above and fixed my image size however the parallax hight is too narrow for what I want. How do I change the hight of the parallax to say 400px?

Thanks

[Kyle – SUPPORT]

Add this in your custom css:

/*Parallax height homepage */
.spb_parallax_asset.home-parallax {
  height: 400px;
}

– Kyle

[Robquinn]

Can you clarify exactly where I need to go to so I can change this – (I’m not a programer)

Many thanks

[Kyle – SUPPORT]

Theme Options > Custom CSS/JS

-Kyle

[Robquinn]

This reply has been marked as private.

[Kyle – SUPPORT]

If you change it to this:

.spb_parallax_asset {
  height: 240px;
}

It will increase the height of the parallax section, but it will apply for all parallax sections. If you want it to apply for only that section, add an extra class to the parallax element in the Swift Page Builder.

Say your extra class was ‘my-parallax’ change the css to:

.my-parallax .spb_parallax_asset {
  height: 240px;
}

– Kyle