reload the background image from CSS file (JS)

Question

I have a CSS file that contains a background image: in this case it's an animated PNG. This APNG has loop 1, meaning it only plays one time. I have it working that the file reloads but what I now need to have is to get the actual background url from the CSS File

FROM FILE: style.css

.my-div{
  background-image: url("img/animation_menu_no_loop.png");
  background-repeat: no-repeat;
  pointer-events: none;
  background-size: contain;
}

<div id="container" class="my-div">some text</div>

The following works fine and restarts the animation when in viewport:

document.getElementById('container').style.backgroundImage = 'url("img/animation_menu_no_loop.png'+'?a='+Math.random() +'")'

but there is only one problem, I have now hard coded the image src as I have taken from the CSS file. But if I update the CSS background I also need to update the 'style.background' line so for this I need to extract the actual URL used in the CSS file. How can I get that out?

I mean extract this section from the CSS file:

"img/animation_menu_no_loop.png"

Have you tried putting the style: background-image: url("img/animation_menu_no_loop.png"); in the html and replacing the value each time the element comes into focus in the viewport, with the same value — Cypherjac
– Cypherjac, Commented May 13, 2022 at 11:36
for that to work i need to first get the contents of the .my-div class to get the filename as that one can be changed in the css. I was thinking to add "...animation_menu_no_loop.png?v=1234" where 1234 could be generated by JS code — Ewald Bos
– Ewald Bos, Commented May 13, 2022 at 11:43

Cypherjac · Accepted Answer · 2022-05-13 13:21:05Z

1

I've tried recreating with a similar APNG file, although this one seems to have more frames.. Even so, it replays itself automatically

Is it possible to upload the one you're using and link it in this snippet for testing purposes

div {
  width: 200px;
  height: 200px;
  background-color: gray;
  background-repeat: no-repeat;
  pointer-events: none;
  background-size: contain;
  /* background-image: url(https://gifimage.net/wp-content/uploads/2018/05/sparkler-gif-9.gif); */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png);
}

<p>Reload GIF</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div style="">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

For your new problem: You can place the value for the url in a variable, like so:

:root {
    --my-pnga: img/animation_menu_no_loop.png;
    --my-pnga-url: url(img/animation_menu_no_loop.png);
}

Then to use it in the css:

background-image: var(--my-pnga-url);

And to access it with javascript:

let my_pnga = getComputedStyle(document.documentElement)
    .getPropertyValue('--my-pnga');
    document.getElementById('container').style.backgroundImage = `url("${my_pnga}?a='${Math.random()}'")`

edited May 13, 2022 at 13:21

answered May 13, 2022 at 11:57

Cypherjac

8799 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Phillips Over a year ago

I went straight to 'run code snippet' without first reading your answer and trolled myself waiting for the gif to stop :D

Ewald Bos Over a year ago

This works perfect, you are a life saver, did not know this was possible to use the :root function in the CSS file. This opens so many more possibilities. thanks you are a master!

Collectives™ on Stack Overflow

reload the background image from CSS file (JS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related