How do we set the height of background image of paralax?

[danigorgon]

I have uploaded an image of 1920px wide x 1080px high and used it as background under parallax effect. But it seems the image is not being displayed it’s full height when we scroll up/down. Bottom portion of the image is being cropped off.
1) How can I avoid this?
2) How do I set a minimum height for a particular parallax image? say 400px. what code and where can i change it?

Here is the link for it: http://www.elcome.co/about-us/vacancies/

Many thanks

[Mohammad – SUPPORT]

Hi,
I am not able to see your link. Its giving 404 error.
Thanks

[danigorgon]

Sorry, I changed the page name to career. Its http://www.elcome.co/about-us/career/
Thanks

[Kyle – SUPPORT]

Hi

Because the parallax asset is at the top of the page you will never see the bottom of the image as you can’t scroll up any further. If you check my screenshot you will see that the bottom of the image will be behind the white and blue areas, but as we can’t scroll any further up the page, the parallax asset will never hit the bottom of the window

– Kyle

[danigorgon]

Hi Kyle,
I moved down the parallax by one element and I can see the bottom of the image. Thank you.
How can I set the height to say 400px or 500px? I would like to give it a bit more height than what it is now.
Kind regards

[Kyle – SUPPORT]

Great!

Add this to your custom CSS

.spb_parallax_asset {
  padding-bottom: 150px;
  padding-top: 150px;
}

– Kyle

[danigorgon]

Hi Kyle, that works perfectly. But with this code, the effect applies to all parallax across the website. How can I set the height specific for each parallax on a certain page?
Sorry for the silly questions. I am not a programmer and have no knowledge about coding.

Many thanks in advance.

[Kyle – SUPPORT]

You will need to add an extra class to your parallax asset, then include the extra class in the CSS, for e.g.:

.yourclass .spb_parallax_asset {
  padding-bottom: 150px;
  padding-top: 150px;
}

– Kyle

[danigorgon]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this to your custom css:

.spb_parallax_asset.myparallax {
  padding-top: 200px;
  padding-bottom: 200px;
}

I have used the extra class ‘myparallax’

– Kyle

[danigorgon]

Hi Kyle, great, it’s working perfect. Many many thanks. You guys are doing a wonderful support. Five stars.

Best regards

[Kyle – SUPPORT]

No problem 🙂

– Kyle