Hi,
Hoping someone has a solution for a verticle slider effect I am trying to create with fixed background images.
I have the images working, but the fixed background position is fixed to the screen width and not centred in the Div block on the left as I wanted.
Here is the website I have got the idea from - Custom modern staircase | genico
My current test - https://www.michaellieu.co.uk/test
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey there,
From what I can see, it’s just a matter of background position, which is easily fixable by editing your div’s background settings. Could you share your site’s read-only link? Go here if you don’t know how to do that
Heres the link. Sorry for the mess, it’s on the test page.
I need the background image to be centred on the Div block on the left, so that you can see the whole graphic as well as have it responsive.
Thanks!
https://preview.webflow.com/preview/michael-lieu?preview=eb4b0caf8c8f5d170d1bd2a235c9ad07
Alright, here’s the deal.
Your first image is an easy fix: all you need to do is set the width to 50% [A] and then align it to the left [B]. Since this is a symbol, you could lower the width even further (say to 40%) and adjust the alignment [C] in order to have it fit snugly into the left half of the viewport.
Your second image is more of a problem. See, the left half of the viewport is kind of square-sized (although it does vary, depending on screen or window width:height ratio), which means that photos which are a lot wider than tall or vice versa aren’t going to fit properly - unless you’re willing to put up with white spaces. It’s like trying to fit a rectangular picture into a square picture frame. You need to compromise, either by cropping some piece of the photo away or by leaving a lot of white space around.
By the way, parallax effects are a bit tricky on mobile devices, since at times they work (IX2) and at times they don’t (CSS). Moreover, the viewport gets dizzyingly tall, meaning that in your case you’d need to redesign how the whole thing works if you don’t want to get two 4:1 slices per section.
