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

Moving Backgrounds: When, Why, and How to Use Them – SitePointSkip to main contentFree JavaScript Book!Write powerful, clean and maintainable JavaScript.RRP $11.95 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.

how to make your website look straight out the late 2000s ?

I cut my teeth in Web design and dev in the 90s-2000s .It was a crazy time, not many rules but plenty of constraints.What I don’t miss is the client comments “this doesn’t look very fun, can you make it more fun?”“ it needs to pop more”“Make the buttons look like buttons”“It just doesn’t grab me”Maybe I was a bad designer, but I was always chasing an unknown feeling. I guarantee the designers for iCarly wanted to shoot themselves before making it “pop” any more.I think one of the major differences today is the interface. Back then we were designing everything, everything had fun containers, shadows, borders, etc. Whitespace? What’s that? Eew! Today we don’t add extra chrome to the interface, we let the device be that chrome now. It just took us 20 years to let the content shine and not the interface.

8 CSS & JavaScript Snippets for Creating Paginated Navigations

Pagination is one of those little design necessities that often gets overlooked. But for blogs and other content-heavy sites, it provides an important means of navigating between pages. A well-crafted paginated website can encourage users to explore further what you have to offer. Some designers dare to take pagination to the next level. Here’s a…

25+ Best Android Phone & Tablet Device Mockups (Free & Pro)

When showcasing an app or a website design, it’s important to use the device mockups that represent the right platform. Never make the mistake of using an iPhone mockup to present an Android app design. Most designers often use iPhone mockups to showcase their designs. But, if you want to make a bigger impact with…

Smashing Podcast Episode 39 With Addy Osmani: Image Optimization

In today’s episode of the Smashing Podcast, we’re talking about image optimization. What steps should we follow for performant images in 2021? I spoke with expert Addy Osmani to find out. Show Notes “Image Optimization,” Addy Osmani Addy on Twitter Addy’s personal website Weekly Update Meet :has, A Native CSS Parent Selector (And More)written by…

Exploring the Use of Sticky Vertical Navigation in Web Design

Navigation in website design typically only includes the same basic menu items, modestly sit in the header, and always greets the viewer from the outset. Since the popularization of the hamburger button, nothing earth-shattering has happened in navigation design. But some web designers have dared to change that by using the unconventional yet elegant sticky…