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...);