New Landing › How can we help? › Themeforest Theme Support › Dante › Parallax image height and zoom

Viewing 15 posts - 1 through 15 (of 18 total)
1 2
  • Back to forum
    Posted in: Dante
  • January 14, 2014 at 1:27 pm #42318
    costin
    Member
    Post count: 199

    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!

    January 14, 2014 at 8:41 pm #42486
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    January 14, 2014 at 8:48 pm #42491
    costin
    Member
    Post count: 199
    This reply has been marked as private.
    January 14, 2014 at 9:05 pm #42495
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    January 14, 2014 at 9:20 pm #42498
    costin
    Member
    Post count: 199

    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.

    January 14, 2014 at 9:23 pm #42500
    Kyle – SUPPORT
    Moderator
    Post count: 35880

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

    – Kyle

    January 15, 2014 at 1:11 pm #42651
    costin
    Member
    Post count: 199
    This reply has been marked as private.
    January 15, 2014 at 1:40 pm #42671
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    January 16, 2014 at 12:42 pm #42962
    Melanie – SUPPORT
    Member
    Post count: 11032

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

    Cheers

    January 17, 2014 at 3:09 pm #43249
    Robquinn
    Member
    Post count: 14

    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

    January 17, 2014 at 3:27 pm #43252
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Add this in your custom css:

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

    – Kyle

    January 17, 2014 at 3:45 pm #43253
    Robquinn
    Member
    Post count: 14

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

    Many thanks

    January 17, 2014 at 3:52 pm #43256
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Theme Options > Custom CSS/JS

    -Kyle

    January 17, 2014 at 4:23 pm #43262
    Robquinn
    Member
    Post count: 14
    This reply has been marked as private.
    January 17, 2014 at 6:06 pm #43270
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

  • Back to forum
    Posted in: Dante
Viewing 15 posts - 1 through 15 (of 18 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register