John Jackson John Jackson - 4 months ago 18
CSS Question

How can I properly change div 'background-image' with every page refresh/load?

I've searched extensively but it seems i can't come across a solution to fit my specific issue. I have a GIF file as my div's background-image & it 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 I can use that will essentially remove the background-image and add it again on a page refresh? Almost making the DOM think its 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

Answer

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() + "')"
Comments