But when you click and exit to the next zone, I want the #ui-bar background to change to a different image, lets sayyy... (https://i.imgur.com/Tw9kyBJ.png) this image.

I've tried going into the css page and doign something along the lines of

.

#ui-bar.mushroomzone{
//set the background-image here
}

Which didn't work... so I had the idea of maybe creating a variable that updates itself each passage and is referenced in the css to assign the background-image url when the ui-bar loads each time. But I have no idea how to go about executing this or even if it's the most viable way. Honestly I mostly just want a side pannel with a background, so would it be easier to hide the ui-bar and just pad my main body away from the side and add a picture there of the same size and shape each time? I'm kinda torn.