How to change background images more than once in harlowe 2.0

a feature I want to include in the rpg game I making is that the background images will change more than just once for e.g this is what I pasted in my stylesheet:

}
html { 
  background: url(https://www.dropbox.com/s/kvxpbdwoyowgln8/mayor's house.jpg?dl=1) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main {
 background-image:url("https://www.dropbox.com/s/sbphbzii7rq5g9q/Mayor.jpg?dl=1&quot

; background-size:cover; } .Shop { background-image:url("https://www.dropbox.com/s/msr2m1kl6bqp7ia/LindblumWeaponShop.png?dl=1" background-size:cover; } now when I start the game I have the bg image I add this to the main to make it change image

<script>$('html').removeClass().addClass('main')</script>

but I want when I enter shop that the image changes once again but it doesn't seem to work can you guys please tell me what should I do