How do you set the width of the background image for this Javascript code?

Question

The freezegframe.js plugin by Chris Antonellis allows you to basically start an animated gif on a mouseover. It has some nice things like fading in the animation as well. This is the required syntax to kick in the plugin: you set

<script type="text/javascript" src="freezeframe.js"></script>
<script type="text/javascript">
freezeframe = new FreezeFrame();
</script>

in your header file, and then simply:

<img src="img/mr_div_retro_sphere.gif" freezeframe />

within your HTML body. The image can then be styled with

figure.freezeframe-container {
    border-radius: 3px;
    border-top: 1px solid __border__;
    border-left: 1px solid __border__;
    width: 100%;
    margin: 0 auto;
    -moz-box-shadow: 5px 5px 3px #888;
    -webkit-box-shadow: 5px 5px 3px #888;
    box-shadow: 5px 5px 3px #888;
}

As indicated in the documentation (see original link). The problem is that there is currently no way to style the background image. See the test example here .

As you can see from the test, the background image is sized using the original gif. However, because I want the site to be elastic in sizing, then I need for a way to size the initial image.

I've contacted the author, but he explains that the difficulty is that the code currently takes the first frame of the image---it seems unclear how to attach a CSS styling command to it.

Answer 1

That's weird, but a hacky way to make it look decent would be this:

.freezeframe-container { background-repeat: no-repeat; background-size: 78%; }

But it looks like the initial background image doesn't match the animated gif too well.

Hope that helps.