How do I create a background GIF?

Community resources Webflow Tips
1

Hi, you’re able to create background videos as they have their own layout.

But what about GIF’s, how do I make a GIF a background?

Someone mentioned using a Div block here, How can I upload a GIF for background video for mobile display? --------> “The background video widget only support webm, mp4 ogg formats. You can create a div and add your gif as background!”, but I don’t see any options to do so when I open a div block and insert a GIF.

Can anyone show me in screenshots or maybe a recording of how I can accomplish this?

I’ve searched ‘How to create a background GIF in Webflow’ and it pitches no relevant results except that one link I already provided…no one’s covered it on YouTube or anywhere.

2

It’s no different from a background image. You’d just create your DIV, upload your GIF, and set it as the background image.

That’s a fairly uncommon thing to do though, and remember animated GIFs can be very large files, so optimize well.

3

Can you screenshot that option? I’m very new to Webflow.

4

To clarify; I don’t want the background GIF (Or image) to cover my entire website, I just want the exact resolution of the image set.

5

Here’s where to start then, everything you’d want to know;

Backgrounds | Webflow University.

6

Thanks, I figured it out. I was skimming past the background option in Style (S), so this issue is solved. But, I came across a new issue that I need solved, I would really appreciate you giving that a read and commenting on it as well. - I'm using particles.js on my website, adding particle.js to a div block, but when I expand the background of my website, the particles don't appear for the rest of the page. How do I fix this?

Or my Reddit link - https://www.reddit.com/r/webflow/comments/10a5c9j/im_using_particlesjs_on_my_website_adding/