Online Store

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:

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 the 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. 


Can I add a video background to a page?

You cannot add a video background, but we are working on this. As a workaround, consider adding an animated .gif file as your background image. 

You can convert your video file (MP4, WebM, AVI, MPEG, FLV, MOV, 3GP, or another format) into a .gif format. There are some free tools available, which you can find using this Google search or using one of these tools:

Once you have your .gif file, you can proceed with creating a new background. 

We hope this article has helped you. If you have any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
0 out of 0 found this helpful