Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
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.
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.
Comments