Hi, I perused the threads but didn’t find anything (recent) to help me. I am wondering about the parallax image size.
Currently I am adding images to rows but it’s really hard to gauge the dimensions. I believe I can’t determine the row height, so it’s a very time consuming trial and error process of adjusting the sizes and paddings of the row content, and then changing and changing the image up to 20 times to find exactly the right height for everything to work. And then rearrange everything for different devices to ensure responsiveness.
There must be an easier way? Can I determine the row height somehow, or do something that the row height is automatically set according to the parallax background image? Alternatively, if I know my content will be any given height, are there rules of thumb regarding the parallax image height? The only thing I can glean right now is that the image needs to be larger than the row for the effect to take place. But then a lot of the times the image is cut off randomly on the top and / or bottom?
Things are confusing.
I’d appreciate any info on this, thanks!
Jele
Hi Jele,
I would recommend taking a look at the live editor. It should help you speed up the testing phase.
I would recommend trying Parallax (Orignal) as that version doesn’t feature any scaling (the row height isn’t as important and we don’t resize the image). Now for the scaled parallax, the important thing is that the image is larger than what the image is being applied to. Yes, it’s more complicated than that but it’s really quite tricky to explain. Your best bet is to just use larger images. I try and aim for twice the height of the row and roughly 1920px in width.
For reference, you can see the full parallax calculation here. Just be aware that there’s a decent chunk of math involved.
Thank you Alex, indeed I’ve almost fully neglected the live editor. I’ll incorporate it more.
The information provided is very helpful and should make things a lot easier in the future!