base64 encoded animated gif as css background?

Question

I have an animated gif encoded into my css as such:

.magicBg {
background-image: url(data:image/gif;base64,R0lGODlhAQBkAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0ND ...
}

This animated gif is encoded to play once.

However, once this animated gif plays once as background on an element, it never plays again. Using

$('body').removeClass( 'magicBg' );
$('body').addClass( 'magicBg' )

Has no effect -- we start on the final frame of the gif. Any ideas how to make this play from the beginning every time the class is added?

Unfortunately, another answer suggests reloading the gif from the server using some random url parameters. Alas, this is not going to work for my case as I am encoding the image into the css itself. Can you add a random date stamp to base64 data?

Answer 1

You can add additional bogus fields to the data url to force replaying of the animated gif:

//use date timestamp to ensure no duplicates
url(data:image/gif;bogus:ABCDEF;base64,R0lGODlhA...);

Answer 2

Glad to see the trend of embedding base64-encoded loading gifs is taking off!

Back to the issue at hand, there`s a pretty common typo in your background declaration, fixed that for you. The following:

base64,R0lGODlhEAAQAOMAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkv/////////////////////...

should have been instead

base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwE...

Seriously though, you've probably just encoded a corrupted file (not impossible if you were using an online encoding tool).

To troubleshoot the issue, I've first downloaded the file you've embedded (right click > view background image > right click > save as... on Firefox). That image could not render correctly either:

Funny enough, it looked just fine in Finder file preview when I was uploading it to SO imgur. Broken index? File upload terminated too soon? I don't know enough about technicalities of the GIF format to offer insight beyond speculation, but I've encoded the fixed file.

NB: no need to use quotes in url()