Animated loading gif image as a repeated background

Pablo picture Pablo · Dec 23, 2010 · Viewed 20.2k times · Source

I would like to find something like this:


(source: opengraphicdesign.com)

But that it can be a repeated background on an html element and looks like a whole block.

For example, a 80x80 gif as a repeated background in a 400x400 DIV that would give the illusion of a big 400x400 animated image.

Where can I find such a GIF

Answer

Pablo picture Pablo · Dec 28, 2010

I did it, after some fine cutting I've created the perfected image for the job. Here is the gif image: alt text

And here is a live demo http://jsfiddle.net/dtxSW/94/

HTML:

<span></span>
<span></span>
<div></div>

CSS:

div {
  background:url('http://i.stack.imgur.com/tQTRW.gif') repeat;
  height: 500px;
}

span {
  width: 108px;
  height: 18px;
  display: block;
  background:url('http://i.stack.imgur.com/tQTRW.gif') repeat-x left;
}

This gif can be repeated infinitely and still look as one big whole animated image.