I want to replace a two image gif animation with a sprite.
The problem is, that I am using a responsive design. So when the window size changes, the whole "system" is not working any longer. The gif is bad, and cpu eating, but it scales right.

So my question - as I found no solution - is it possible to get the window size from the actual window, scaling the image to the right height, width and of course changes the "jump" from 1st image to 2nd image and so on. 

```
var scrollUp = (function () {

  var timerId;

  return function (height, times, element) {
    var i = 0;
    timerId = setInterval(function () {
      if (i > times)
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px';
      i ++;
    }, 100  );
  };
})( );

scrollUp( 1200 ,   6, document.getElementById('anim'))

```

So at this code the image size is set to 1200 - thats right, if the display is 1980x1200, but as the display changes, the size 1200 is wrong - it should be the actual display size - at the same time, the image should be scaled to that size.

Is something like this possible? Or has anybody a better idea for an eays responsive sprite animation?

maybe css3?

thanks!

AD