Different backgrounds for different chapters (Harlowe)

How can I change the background image of a page based on the chapter?

Right now, the background is in the body tag, and the formatting for each chapter varies with a class tag. This method puts a box that holds the text floating over a full screen background image. Unfortunately, it also means that the whole story uses the same image, whereas I would like the story to change the large image based on the events and setting.

body {
background-color: rgba(189, 98, 44, 0.9);
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/34/Rub_al_Khali_002.JPG");
}
.redo { display:none;}
.undo { display:none;}
.desert {
background: rgba(255,251,244,.33);
color: rgba(71,62,2,1);
width: 1000px;
border: 2px solid white;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 2cm 3cm 2cm 3cm;
}
.city {
background: rgba(255,251,244,.33);
color: rgba(7,4,2,1);
width: 1000px;
border: 2px solid grey;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 2cm 3cm 2cm 3cm;
}

Can I change the body background in a class tag and keep the floating box? Can I create differently classed body tags? (.desert body, .city body) I've been searching through w3schools, but I'm not even sure what the thing I'm looking for is called.