Up Next
Up Next

Animated Web Backgrounds

Animated Web Backgrounds
Animated Web Backgrounds

Animated web backgrounds can give your website a trendy and funky look, as well as taking it to a higher and more effective level. A solid color background or one with stationary graphics are OK for some sites, but those with animated web page backgrounds will be sure to get noticed.

Adding Animation to Backgrounds

In just a few simple steps, you can turn your static and normal web page into one with cute or exciting backgrounds. The simplest way to add animation to your background would be to:

  • Download the image from one of the many sites that offer the files for free or for a minimal charge.
  • Save it as GIF file on your computer (animated images work best as a GIF)
  • Upload it to your website's server
  • Add the image name to your background coding usually within the <STYLE> tags of your Cascading Style Sheet.

Creating Your Own Animation

However, if you have an image you would like to animate for a web page, there are many websites that offer tutorials on how to do this. You will need a photo editing program such as Paint Shop Pro or PhotoShop to accomplish this. Free tutorials can be found at:

  • The Best 3D offers a short lesson with pictures on creating an animated sky using (Project Dogwaffle) PD Pro.
  • Flash Designer Zone shows you how to design an animated bubble background using Flash Designer.
  • Digital Producer uses Adobe After Effects to create a web background that shimmers.

Download Animated Web Backgrounds

A simple Internet search will garner you tens of thousands of sites offering free or low-cost animated web backgrounds. Take your time and peruse the sites until you find a background you want to use. Make sure you read the fine print and the site's terms of use before downloading an image. Many sites ask for a link from yours in return for using the free background. You can find free animated backgrounds at:

Sparkly Animated Background
  • ART-TLC has six pages of animated backgrounds available including comets and stars, wet and windy, and soft and light designs.
  • FG-A has several designs of backgrounds to download. Choose from animated leopard skins, night skies or cool stones.
  • Artie.com offers an animated soccer ball background.
  • Bellsnwhistles has several flashy backgrounds that can be added to your web pages.

Low-Cost Animated Backgrounds

You can also purchase some high-quality animations for use on your website:

  • Animation Factory offers different levels of one-year memberships, each allowing you to download varying designs and types of backgrounds.
  • Rotating CatHead Video sells packages of various animated backgrounds for one low price.

Tips for Using Animated Backgrounds

While there are many instances where animated web backgrounds will work well, there are also times when they won't. If you are already using a lot of flashy images and graphics on your sites, a solid background will be more pleasing to the eye. Also remember that animation does take longer to load than static backgrounds. Keep your files to a minimum for a quicker upload time.For more information about using animated graphics on your web pages, check out the following LoveToKnow Web Design articles.

Animated Web Backgrounds