Free Animated GIF Background

Ashley Donohoe
Update Your Website

A GIF's effect of movement is generated by threading a series of images together, almost like stop-action photography. This short sequence of images is then put on a loop that gives the image its animated qualities. Applying one of these images to your website is simply a matter of inserting it using some code. Various free sources offer images created for use as backgrounds, but you can just as easily tile a smaller image across the page to get the look you want.

Eight Sources for Animated GIF Backgrounds

There are plenty of sources available on the Internet for animated GIF backgrounds. When using any image on your site, check the site for any usage policies to avoid violating copyright laws. Eight of the best no-cost resources are listed below.

  • Gifs.net: This source offers smaller GIF images related to different areas, such as sports, nature, holidays, food, technology, cartoons, and animals.
  • Backgrounds.Free-Animations.co.uk: This website's images are specifically intended as backgrounds and include stars, colors, bubbles, and other patterns. An advantage of using these images is that your background will not appear tiled and will look cleaner.
  • Bells N Whistles: Animated backgrounds and smaller GIFs are available here, and you have many colorful patterns to choice from. There are three pages of various backgrounds, as well as several pages of animated pictures, bullet points, and shapes.
  • ART-TLC: This is another site specializing in animated backgrounds. The six pages of images feature stars, color effects, liquid effects, and various textures.
  • Gif Animations: Although it doesn't have images specifically for use as backgrounds, it offers an extensive collection of small images that can be tiled across the page. You'll need to link back to this website if you use any of the images you find here.
  • Heather Animations: This small collection of creative backgrounds features images showing special effects, animals, bubbles, hearts, hot air balloons, and textures.
  • Animate It: Offering over 5,000 images, this site lets you preview what each image would look like as a background. Most images are medium sized and should be tiled on the page for the best appearance.

How to Put an Animated Background on Your Site

Once you find a background that you like, you'll need to add it to your site.

Method Options

There are two general ways to add an animated background to your website.

  • The first option involves directly typing some code in the body of an HTML document. If you use this method, you will need to add the code to each page on your website, so it may not be the best choice for sites with many pages.
  • The second method is a better solution if your website uses a Cascading Style Sheet (CSS) to specify the page styles because it requires only adding the image's code to the single CSS file.

Uploading the Image to Your Website

Before you can proceed with either method, you need to upload the GIF to your website, usually through FTP. Depending on your host, you may use a separate FTP program or a special file management panel on your website. When uploading the image, you should place it in the directory that contains your site's HTML and CSS files, if applicable. This will make it easier to specify the image's path when you add the code.

Adding the Background to an HTML Document

The process for adding the path of a background image to an HTML document is very simple, but you should remember that you will need to add the image's code to each page. Use the following process to add the appropriate code to the HTML document:

  • Open the HTML file in a web design application or a text editor
  • Locate the <body> tag, located below the <html> and <head> tags in the beginning of the code
  • Change the <body> tag to <body background="picturename.gif">, replacing "picturename" with the name of the image
  • Save the HTML file and re-upload it to your website
  • Repeat the process for each page on your website on which you want the background to display

Adding the Background Into a CSS File

The use of CSS makes the process for adding the background to your entire website less time consuming and allows for customization. If you already use CSS to specify your website's styling, simply make the following changes to your website's CSS file to add the animated background:

  • Open the CSS file in a text editor or other compatible program
  • Locate the body { element in the sheet and press Enter to create a new line for a property
  • Type the following line, replacing "nameofbackground" with your file's name: background-image: url("nameofbackground.gif");
  • If you are using an image you don't want to repeat across the page, press Enter to create another new line and type the following: background-repeat: no-repeat;
  • Save the CSS file and reupload it to your web server.

Best Practices

When using an animated GIF as your website's background, you must first choose the right image that makes sense within the context, tone, and subject matter of the website. If the image is small, it's important to remember that using the GIF will cause it to repeat along the X-axis and the Y-axis, unless you specified otherwise in CSS. For larger GIFs, the image may become cut off at the edges of the browser window. Some main points to consider when using animated GIF backgrounds are:

  • Don't use images that can be overly distracting to the visitor.
  • Use the correct image in relation to the content on the site.
  • Make sure the image is not too small and not too large.
  • Set the image to repeat on the page if you're using a small image. (Note: this occurs automatically if you're just adding the code to an HTML document.)

Other Reasons for Using Animated Images

There are many reasons for using animated GIF's, particularly on small self-made websites. Although backgrounds are a popular use, there are other applications of these images, including:

  • Drawing the eyes to the information on the page
  • Giving the website an idea of movement
  • Complimenting the more static images on the website
  • Adding action to banner advertisements on websites, often drawing the viewer towards it.
  • Animating bullet points to make the information a little more visually interesting.

Using Backgrounds the Right Way

Selecting an appropriate GIF background can help you design a more attractive and interesting website, whether you tile a small image or use a specially designed background. When choosing a GIF animation, remember that it should compliment the look of the website, rather than detract from it. This means choosing an image of a proper size and avoiding images that may lead visitors away from reading your site's content. When done properly, the effect of an animated background can be quite pleasant.

Free Animated GIF Background