Using a gif as the page background is pretty easy ... if you don't need to scroll.

Basically, one sets up the html or body with the normal stuff:

• background: url(url_to_gif) no-repeat center center fixed;
• background-size: cover;
• height: 100%;
• overflow: hidden;

and for the body

• height:100%;
• overflow: scroll;
• -webkit-overflow-scrolling: touch;
• background: transparent;

(Problem: when scrolling, on chrome, the gif freezes)

Plus, as pointed out on @glenmaddern's post, we can achieve it by using with a reduced size, then scale it back up. That technique doesn't work well on the body, scaling it's content, so we have to use a div instead. This enables the use of the css filters on the gif, which is cool, and you can see a pen here.

• position: absolute;
• top: 0;
• width: 20%;
• height: 20%;
• z-index:-1;
• background-image: url(url_to_gif)
• background-size: cover;
• background-repeat: no-repeat;
• background-position: center center
• -webkit-filter: blur(1px) grayscale(0.1) brightness(1.0);
• transform-origin: top left;
• transform: scale(5);

However, this works well on desktops with the scroll disabled. If we enable it, there's a blank space as soon as you have to scroll :(

The gif on the background is from the great Reservoir Dogs, fetched from If we don't, remember me blog.