John Jackson John Jackson - 1 year ago 96
CSS Question

How can I make a "loop once" animated GIF background play on every page refresh/load?

I have an animated GIF file as my div's background image, which was saved from Photoshop to loop only once. So the only time it plays is on the original load of the page.

Is there any method to essentially remove the background image and add it again on a page refresh? Almost making the DOM think it's a new image thus looping it again?

Here's the div:

<div id="name-logo"></div>

and css:

position: relative;
width: 403px;
height: 93px;
margin: 50px auto 100px;
background-image: url(my.gif);
background-position: center;
background-size: contain;
background-repeat: no-repeat;


Answer Source

One way to achieve it is by versioning. This will make the dom believe that it a new image every.

document.getElementById('name-logo').style.backgroundImage = "url('my.gif?v=" + new Date().valueOf() + "')"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download