Adding an animated background

Adding a website animation can help you create a relevant mood and enhance the aesthetics of your site. When used right, animation can help your site stand out and highlight your business’s core messages.

With Sitebuilder, you can add eye-catching .gif background animations in a matter of minutes. 

Before you start

Many relevant animated .gif files are available for download on the web.  Try these websites to download animated images for your background:

• Giphy
• Gifer
• AnimatedImages
• Gfycat

If you want a unique one, you can create it yourself with .gif making tools, such as Ezgif, MotionElements, or Vista Create.

Adding an animated background image

You can add an animated background only to the blocks with the background image, such as Heading block and Call to action block.  

Here’s how to do this: 

1. Hover over the block where you want to add an animated background to enable its Control pane.
2. Click the Edit image icon, which is a shortcut to the Appearance tab.
   
   
   Alternatively, you can click Block settings > Appearance tab.
   
   
3. Click the Replace image button and choose Upload a file from the dropdown. 
4. Locate an animated .gif file on your computer and select it. It will be automatically resized and uploaded to your background. 

Note: The maximum file size for a free hosting plan is 5 MB. To upload a larger file, you need to upgrade.

If your animated gif doesn’t perfectly fit the image frame, you can adjust its position using the Crop tool. You can also resize it, change its focal point, and add an overlay, like in the video below.