Photoshop Question posted in
The official user guide can be found here.

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

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;

Thanks

Tags:

2

Answers


  1. 0

    I’m unsure if this will give you the exact result you’re looking for, but you might be able to use JavaScript to set up an interval that runs every (however long your .gif naturally runs). So, if it takes a second for your .gif to run, you might do something like this:

    setInterval(function() {
     // clear out the current background image as it is
     document.getElementById('name-logo').style.backgroundImage = "url('')";
     // reset the background image
     document.getElementById('name-logo').style.backgroundImage = "url('my.gif')";
}, 1000);

    Again, I haven’t personally tested this, but it might lead you in a good direction.

    Login or Signup to reply.
  2. 0

    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() + "')"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search