How to get animated background images to crop on resize

Hi there! I’m new to webflow, I’m wondering how to get all of these little animated shapes to crop out of view on resize instead of resizing. As you can see when you get to the smaller viewports it looks pretty cluttered. Here’s an example of what I’m trying to accomplish: https://jonathancollie.design/

Any help is MUCH appreciated, I might be doing this the wrong way! :slight_smile:

Kelly


Here is my site Read-Only: https://preview.webflow.com/preview/kellys-dynamite-project?utm_source=kellys-dynamite-project&preview=68c28e4c8e9d4355355e13fea1fe28b2

There’s a pretty quick solution for your issue as you can, for each device, turn the visibility off for some of the symbols, to reduce the cluttering. So click tablet, turn a few display:none, switch to the next view, remove some more, and again for the last smartphone view.

You could have had a large element in the back of the section, centered, position absolute, that contain the symbols. Witha fixed width, this element would have bled outside of the main area/viewport, only showing its center as the viewport would reduce.

But as for now solution #1 will take you a minute and work.

Used the second solution and it looks awesome, thank you!

1 Like