title: base64 encoded animated gif as css background?
body: <p>I have an animated gif encoded into my css as such:</p>
  
  <pre><code>.magicBg {
  background-image: url(data:image/gif;base64,R0lGODlhAQBkAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0ND ...
  }
  </code></pre>
  
  <p>This animated gif is encoded to play once.</p>
  
  <p>However, once this animated gif plays once as background on an element, it never plays again.  Using</p>
  
  <pre><code>$('body').removeClass( 'magicBg' );
  $('body').addClass( 'magicBg' )
  </code></pre>
  
  <p>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?</p>
  
  <p>Unfortunately, <a href="https://stackoverflow.com/questions/7568855/restart-animated-gif-as-background-image">another answer suggests</a> 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?</p>