How to zoom out a parallax homepage banner - Upfront

Hey guys,

I have set up a parallax banner on one of my sites which I think looks great but client wants me to zoom the banner image out so that he can see more of the image.

I currently have an image 3000px wide but it still zooms quite a way in once you make it parallax. Is there a way to force the banner to zoom out using CSS? I tried to fiddle around in Chrome Inspector but I wasn't sure what class I should be playing with so I could achieve what I was trying to do.

Any tips here would be appreciated.

Cheers... Brett

  • Adam Czajczyk

    Hello Brett,

    I hope you're well today and thank you for your question~

    The "Parallax" image mode sets the image the way it best suits the current screen resolution in order to achieve a parallax effect. Currently, the image is used in a way that may be very difficult to address with a CSS only and I admit I'm not quite sure if I understand you correctly.

    By "Zoom out" you mean that you'd like to make the "better portion of an image" visible before you start to scroll the page than it's visible now? The 3000 pixels wide image is quite large so what about just making it smaller and re-uploading?

    I may be missing something here so please advise!

    Best regards,
    Adam

  • Brett

    Hey Adam,

    Yes, I understand that the parallax will chose the best option given the screen size... I tried to explain that to the client but he is adamant that he wants to see more of the stairs visible on his desktop.

    Yes, what I mean by "zoom out" is to have more of the image visible prior to scroll down. It's almost like the element ignores how wide the original image is and there are several hundred pixels on either side of the viewport that are cropped out.

    I would have thought using a smaller image would cause the image to "zoom in" even further than it is now because you are basically stretching a smaller width out across the whole screen?

    Hope that makes sense?

  • Brett

    When the banner is viewed @ 1280px wide you can see several more stairs than when it is viewed @ 1680px.

    As you move your browser window out from 1280px you see that as the image resizes it also zooms in closer to the stairs and as a result you lose sight of the overall image.

    As the original image (3000 x 2000) is more than double the size of the region (1680 x 725) when we increase the width of the screen to 1680px the original image is large enough to retain the correct aspect ratio of the original image but then crop the image according to the region height (725px).

  • Adam Czajczyk

    Hello Brett,

    Thank you for your replay. This makes sense but I'm still not sure how the parallax background image could be address via CSS. I already asked Upfront developers for help here and hopefully they'll be able to lend us a hand.

    Please note though that their response time may be a bit longer than mine here on forum so keep an eye on this thread and I'll update it as soon as I get a replay.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Brett!

    I just got a replay from Upfront developers. Currently it's not possible to address this issue with pure CSS as the parallax background effect is handled entirely with JavaScript. There's no option to change settings related to this as well. It may be added in future but I'm not able guarantee this, nor give you any ETA.

    An adjustment of an image (on an image level) is the way to go here. It may be possible to "hack" J code but that'd be a complex custom work and most likely will break upon plugins update. In case you'd need it urgently though you may want to post a question on our "Jobs & Pros" job board (please note: no WPMU DEV staff involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.