Hi,
Nearly finished my interactive narrative but there is one thing that would really make the narrative more meaningful. I'd like different passages to have different backgrounds. I've attempted to do this many times in Harlowe and I really don't want to have to change to Sugarcube either. Can someone help me to change the background, please? I'd be eternally grateful! ( If possible, please insert it in my code with notes, so I understand how it was done. As you can see i'm someone who loves taking notes when coding!)
Many thanks,
Jade
@import url('https://fonts.googleapis.com/css?family=Pangolin|Slabo+27px');
body, tw-story {
font-family: 'Pangolin', cursive;
font-family: 'Slabo 27px', serif;
font-size: 18px;
background-image:url("images/background.jpg");
background-size:cover;
background-repeat: no-repeat;
}
div {
background-color: black;
width: 600;
height: content;
border: 1px solid white;
padding: 25px;
margin: 25px;
overflow: hidden;
}
h1{
text-align: center;
}
h3{
text-align: center;
}
h4{
text-align: center;
}
h5{
text-align: center;
}
b{ /* Controls the color of the bold font*/
color: #856478;
}
tw-sidebar { /* This gets rid of the back button */
display: none;
}
/* COULDN'T GET THIS WORKING USING A TAG AS SUGGESTED!
html.memoryIsFound body {
background-image: url("images/background2.jpg");
}
*/
tw-passage { /* This controls color the whole passage writing */
color: #ffffff;
}
tw-link { /* This controls the color of the passage links */
color:#1D8CE8;
}
a.passage link{ /* This controls the colour of the visited links on mouse hover */
color: #3F6485;
}
.enchantment-link:hover, tw-link:hover { /* This controls the color of the passage links when the mouse hovers over it */
color: white;
}
tw-link.visited { /* This controls the colour of the visited links */
font-style: medium;
color:#856277;
}