Moving Backgrounds: When, Why, and How to Use Them

Share this article

Moving Backgrounds: When, Why, and How to Use Them

In this article, we’ll take a close look at the whats and whys of moving backgrounds. We’ll consider the impact they have on conversions, examine when they should and shouldn’t be used, and then offer practical tips for doing them the right way.

Moving Images are Powerful

There’s no denying people love video content. TikTok is shooting up the app charts, and short clips are surpassing pictures for shares on Facebook. Things that move are eye-catching, engaging, and more memorable.

The appeal of video isn’t limited to social media. Moving elements on your landing pages give users a way to instantly connect with your brand. Here are some more web design statistics worth knowing:

  • Various studies show videos can increase landing page conversions by around 80%.
  • A shopper who watches a video is nearly two times more likely to convert than a shopper who doesn’t.
  • Two thirds of people would rather read something beautifully designed than something plain.

Video can do good things for your site. But that doesn’t mean you should turn your home page into a mini cinema. As with all things web design, it’s all about finding that sweet spot between what feels playful and exciting and what works.

When to Use Moving Backgrounds

Moving backgrounds can be incredibly effective, but they’re not always appropriate. They slow your site down, they can be distracting, and they’re creatively bold — three things that aren’t suitable in certain situations.

For example, if you’re offering something complex, a video is more likely to distract that aid comprehension. If you’re offering something serious — like financial advice, government information, or anything to do with healthcare — a video just feels … wrong. Similarly, if you’re a practical site — like a grocery store or tool hire site — then speed is probably more important that giving off a certain vibe.

On the other hand, if your business is all about exuding a certain mood, then moving backgrounds can be perfect.

We use one at Chromatix because we’re a creative design agency, and playfulness and beauty are hugely attractive to our customers.

Luxury lifestyle brands often use moving backgrounds to good effect, because people buy into an experience rather than a product. The same goes for conferences and events, spas, retreats, vacation rentals, and so on.

Here are three reasons to use moving backgrounds:

  • to set a tone
  • to exude a lifestyle
  • to elicit an emotional reaction

Here are three reasons not to use a moving background:

  • because everyone else is doing it
  • because conversion statistics tell me it’ll get good results
  • because it looks pretty

How to Successfully Incorporate Moving Backgrounds into Your Home Page

Whether you’re building your site from the ground up, using WordPress, or working with a drag-and-drop website builder, here are some tips to help you get it right.

1. Don’t let your site slow down

Sending a visitor to a slow site is bad news for your site numbers: 39% of people will leave a website if images take too long to load. It’s one of the top SEO ranking factors. The conversion rates of pages that load slowly drop by an average of 4.42% with each additional second of load time (within the first five seconds).

There’s no getting around it: videos and moving elements will slow things down. Here are three steps you can take to mitigate sluggish site speeds:

  • Optimize your images. (Check out SitePoint’s Jump Start Web Performance for some in-depth tips.)

  • Compress your files and manage your own caching. (This can be a complicated job, but tools like Nitropack can help.)

  • Loop your video. When it comes to looping your video, bear in mind that bigger videos will slow down your site — and as we’ve mentioned previously, having a slow-loading site sends conversion rates plummeting. One way to keep speed up is to have a shorter video that loops. Try to aim for 5–10 seconds in length, then loop it seamlessly and continually to give the impression it’s longer than it is. Remember: you’re just trying to create a mood, not play a full film or advert.

2. Keep your call to action clear

The attraction of moving images is that they’re eye-grabbing — and when it comes to setting the mood and boosting dwell time, that’s a good thing. But watch out: if your CTA is fighting for attention or overlooked because your moving background is too distracting, then you’ll hit problems.

CTAs convert better with a little negative space around them. 232% better, to be precise. When there’s too much visual noise going on, it’s hard to pick out the important bits — so avoid putting your call to action over your video.

3. Make sure text is readable

Ever watched a movie with white subtitles, only for a snow scene to come up and swallow up the text? OK, so that’s quite a niche example, but you get the idea: choose the color of your text carefully when it’s going over video, because the image moves and the text needs to be readable over every single frame. Pick colors that contrast so the message isn’t lost like white subtitles over snow.

If your moving background is detailed and contains all the colors and shades, then simply opting for a contrasting color might not be enough. In this case, try a light, dark, or colored overlay to decrease the contrast and allow your text to pop.

4. Choose a background that enhances your message

Moving backgrounds have a tendency to steal the limelight. It’s why we like them! But if they’re pulling focus from your core message or goal, then you’ll soon hit choppy waters.

When picking your video, don’t just go for what looks pretty. Put some real thought into choosing something that’s relevant to your overall message or brand — and most of all, something that will appeal to your target market. Your moving background needs to enhance your home page’s message, not detract from it.

5. Be careful with audio

There are few things more annoying than clicking onto a website, only to have it blast out some music or sound effect unannounced. Especially when you’re somewhere quiet like the office. For this reason, having auto-playing audio is a no-no. If you absolutely must have sound, make sure it loads muted so the power is in the user’s hands as to whether they switch it on or not.

Here are some more tips for better website background videos.

Final Thoughts

Moving backgrounds can be a great way to enhance your brand’s message and draw users into your site. They have the power to boost engagement, send your conversion rates sky high, and create an irresistibly immersive experience. But use them with caution. They can slow your site down, so make sure to do your research on how best to keep things things speedy. And if you don’t really need a moving background, stick to static images and text. Doing what works best for you and your users will always be the best option.

Frequently Asked Questions about Moving Backgrounds

What are the benefits of using moving backgrounds in web design?

Moving backgrounds, also known as animated backgrounds, can significantly enhance the visual appeal of a website. They can make a website more engaging, interactive, and memorable, thereby increasing user retention and conversion rates. Moving backgrounds can also be used to tell a story, convey a message, or create a mood, making the website more impactful and persuasive. However, they should be used judiciously to avoid overwhelming the users and slowing down the website.

How can I create my own moving backgrounds?

There are several tools and software available that can help you create your own moving backgrounds. These include Adobe After Effects, Cinema 4D, and Blender, among others. You can also use CSS and JavaScript to create simple animations and transitions. However, creating moving backgrounds requires a good understanding of design principles and animation techniques, so you may want to consider hiring a professional if you’re not confident in your abilities.

Where can I find free moving backgrounds?

There are several websites where you can find free moving backgrounds. These include Videezy, Videvo, Pixabay, and Pexels. These websites offer a wide range of high-quality moving backgrounds in various categories and styles. However, make sure to check the license terms before using any background, as some may require attribution or may not be used for commercial purposes.

Can moving backgrounds slow down my website?

Yes, moving backgrounds can potentially slow down your website, especially if they are large or complex. This can lead to a poor user experience and lower search engine rankings. To avoid this, you should optimize your moving backgrounds by reducing their file size, using efficient coding techniques, and implementing lazy loading. You should also test your website’s speed regularly to ensure it remains fast and responsive.

How can I use moving backgrounds effectively?

To use moving backgrounds effectively, you should follow a few best practices. First, make sure the background supports your content and doesn’t distract from it. Second, keep the animation subtle and smooth to avoid overwhelming the users. Third, use high-quality backgrounds that look good on all screen sizes and resolutions. Finally, consider the impact on website speed and optimize accordingly.

Are moving backgrounds suitable for all types of websites?

While moving backgrounds can enhance the visual appeal of a website, they may not be suitable for all types of websites. For example, websites with a lot of text or complex interfaces may benefit more from a static background. Similarly, websites targeting older audiences or people with certain disabilities may want to avoid moving backgrounds due to accessibility concerns. Therefore, it’s important to consider your target audience and the purpose of your website when deciding whether to use moving backgrounds.

Can I use videos as moving backgrounds?

Yes, you can use videos as moving backgrounds. In fact, video backgrounds can be very engaging and impactful, especially if they are well-produced and relevant to your content. However, like animated backgrounds, video backgrounds can slow down your website and may not be suitable for all audiences. Therefore, they should be used judiciously and optimized for performance.

What are some popular trends in moving backgrounds?

Some popular trends in moving backgrounds include subtle animations, parallax scrolling, particle backgrounds, and gradient animations. These trends focus on creating a sense of depth, movement, and interactivity, while keeping the animation subtle and non-distracting. However, trends change quickly in web design, so it’s important to stay updated and adapt your design to the latest trends.

How can I optimize moving backgrounds for mobile devices?

Optimizing moving backgrounds for mobile devices can be challenging due to the limited processing power and data bandwidth. However, there are a few strategies you can use. First, you can use media queries to serve a static background to mobile users. Second, you can reduce the complexity and file size of the animation. Third, you can use modern coding techniques like CSS animations and SVGs, which are more efficient and scalable than traditional methods.

Can moving backgrounds affect SEO?

While moving backgrounds can enhance the user experience, they can also potentially affect SEO if not implemented correctly. For example, if the background slows down the website, it can lead to lower search engine rankings. Similarly, if the background makes the text hard to read, it can affect the website’s accessibility and usability, which are important ranking factors. Therefore, it’s important to balance the aesthetic benefits of moving backgrounds with their potential impact on SEO.

Irwin HauIrwin Hau
View Author

Irwin Hau is a private digital strategist / business consultant and the Founder of Chromatix, a multi award-winning web design & conversion agency based in Melbourne, Australia. Since opening shop in 2009, he has gone on to amass over 70 awards and mentions for work in web design and digital solutions.

moving backgroundsvideo backgrounds
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week