[Sugarcube 2.0] How do I change the background image for #ui-bar from passage to passage?

Question

So for this example lets say I have two passages defined by two tags.

mushroomzone

and

birdzone.

In mushroomzone I want the image in the #ui-bar background to be (https://i.imgur.com/EuwbHEo.png) this image.

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.

Answer 1

Okay! I figured it out myself using

 

http://twinery.org/questions/6129/sugarcube-how-do-i-hide-show-ui-bar-in-different-passage
(the only difference between the answer in this link and what works here is that instead of hiding it, in each passage you update the background-image.)
 

BASICALLY!!! If anyone finds this in the future...

 

It's .mushroomzone #ui-bar{

}

not

#ui-bar.mushroomzone{

}

And don't forget the space!