I couldn’t find anything so here’s the question:
My site content is longer in height than my background image. Is there a way to make the background image scroll from top to bottom regardless of the site content height? So that there would bee no blank at the bottom.
Also is there one way to make this so that this would work also regardless of the device the site is viewed on? So regardless of the viewport height?
Thanks!!
Here is my public share link: LINK
(how to access public share link)
@tomppalonen ~ If I’m understanding correctly, it could be the positioning setting. Try setting your bg image to “Absolute” or “Fixed”. Without a “Read-Only” link of your site, it’s hard to diagnose.
I got it working with desktop, but now when I move on fixing other viewports it’s all over the place.
Hmm I dunno how you get anything out of that (I’m new to webflow). The background image is moved by an (while page is scrolling) animation.
Heres what I mean. When scrolling through site bg and content start at the top and end to the bottom the same time even though they are different in height.
Is this possible
@tomppalonen ~ Hey Tomi.
I believe this is what you’re after:
https://dannyfig.s3.us-west-1.amazonaws.com/forTomi.mp4
So it’s strange that I can’t get it to work on your site, but I will try to diagnose a bit more.
Yep. Thats the thing I’m after.
Why VW? Did you mean VH? In your example the colour sections are VH but the container is in VW
I thought about the Doing the anim in VH but at 100% is it the VH of the max height of the site (good) or the bg (bad)? Testing…
Tested with VH and won’t work. If you change the screen size then there is not enough bg image for the whole site.
Problem is that the background image height changes according to the screen size as it’s always 100% of the screen width. So it’s impossible (?) to get it’s 100% animation end point.
HI @tomppalonen there is a way how to achieve your design. You have to keep in mind that if you would like to image grow with you content there will be also image size increasing involved as images are keeping relative size ratio. I have make it work the way you you have requested but its up to you if this really is you are going after. I hope that will help or at least give you some starting point.
More detail in video below.
Early SUPER THANKS to your help. I’ll go through this after New year.
And Happy new year to you all. May it be better than the last two. 
Yep. Thanks! This was a great info. It loses the parallax effect, but I guess you can’t have everything at least now. Maybe I need to cut my site so there would be only some sections with the parallax bg. Let’s see…
hi @tomppalonen here are my personal opinions you can thing about or just ignore these.
Placing massive background image into homepage may have big impact on site performance. Your image is 0.5mb (it is “relatively” ok but…). For such background that cover whole page and need to grow with content can be used image in svg format or more useful can be some kind of gradient.
Parallax effect is not used much at these days as it was popular like 5-7 years ago but still have use if will help push forward mean emphasize page content in specific sections. What I mean ANY animation should be chosen for a reason to support content.
Here is nice short summary about animations article
hi @tomppalonen I had a second idea and it works now the way you need but again it is some kind of hack. 
To create parallax the way you trying to achieve your image has to be bigger than content, right?
In example I’ve set fixed height10000px for your image and set 5 sections as example to 100vh. Now I was able to create parallax fx. You can set different heights for different viewports including landscapes for mobile, play with distance of image move etc.
It is hack as I said and would not automatically grow with your content (you have to set it manually) but it works.
EDIT: I have add another approach how-to so now you have one without Parallax (page t2) and two versions with different approach of parallax effect (page t3 and t4). Maybe t4 is what you looking for.
Hope that will help you to solve your request.
@tomppalonen ~ I hope your weekend was good and safe as well. My bad on the vw mistake. I’ve been doing some horizontal scrolling and you need to apply a vw for the height. Took me a minute to figure that one out.
As Stan mentions, there are some aspect ratio considerations. @Stan ~ I completely disregarded responsiveness. Thanks for your explanation.
I can’t see why in the Interactions, having 0% on frame 0% to 100% on frame 100% applied on the bg image, won’t work. Having your sections static or relative and your bg image absolute should be able to make this happen. Of course, having your image set to respect its aspect ratio. So no matter the height of the site, the bg image should land at the bottom (100% at frame 100%). 
I’m wondering what I’m missing. 
Anyone?
hi @dannyFig I would like only clarify that 100% of image hight is 100% of its original size. It can 100% of 20px or 1000px.
Is this you are asking?
Hi I think you should play with scroll animation using the first and last content on the page as triggers. On first you put scroll to 0% on the last scroll to 100%. Give me feedback maybe I can spend more time trying to figure it out
@Stan ~ It can be hard to explain and to make it worse, be wrong. lol. So basically you’re right with the aspect ratio of the image causing that problem. My thinking was exactly that of @Roberto_Coladomenico. It works, but where the issue lies is when the content is shorter than the image. This being with the “bg image” size set to “auto”.
I have the “bg image” in an Interaction “Move Y” from 0%-100% of the scroll length, but when the scroll length is shorter than the image, the Interaction doesn’t work. I believe you can hack that by finding exactly where the breakpoint/change happens and have a new Interaction “Move Y” the “content” rather than the “bg image”. That would have to be done via Javascript.
Back to @tomppalonen ~ in your case you have horizontal scrolling as well which makes it a bit more challenging. Love your site by the way.
Wow, wow, wow it is for me too many informations and without example is very hard to get it. 
As this request for me personally is solved (unfortunately not marked) you can start new request. The best way is to post video or you can send me PM and we can have chat Zoom , Skype.
I decided to trash the whole site background idea because as stan was pointing it did affect the performance of lower end devices. I’m trying to get it lighter with smaller sections of background images.
Still very interesting info here! Thanks!!!
HI @tomppalonen as I have mentioned you can set background color fallback only for mobile devices to keep website performant.
