Target body {background-image)

[Sunflair]

I am working on a program that transitions the background image depending the level the player is on.  The line of code is:

 

document.body.style.backgroundImage =`url(/dist/asset.round${round}.png)`;

I would like the background to fade in  or out to reveal the next level's background image. 

I am really not picky about the transition, I just want to get rid of the abruptness of the change.

 

How do I target the background image to alter opacity, duration 2?

I am working in Javascript.

 

Edited January 18, 2022 by Sunflair
neglected to say what language I was using.

[OSUblake]

Welcome to the forums @Sunflair

 

You really can't fade something if you've removed it. 😉

 

You would need to stack your images on top of each other and then you can animate between them, kind of like in this demo.

 

See the Pen NWamOQY by GreenSock (@GreenSock) on CodePen

 

 

[Sunflair]

If I were working with regular images, I could do it. I don't know how to 'touch' background image in the Body.

[OSUblake]

You'll need to use regular images as you can't animate the background image of the body like that.