Okay, so I'm just starting with Twine but I'm familiar with CSS. I got my background changed to a different color fine, but then I decided to experiment with changing it to an image. Now I have somehow got it so neither the color nor the image are working, and I've checked the code over and over.
The stylesheet in the story map appears to correctly reference the image, but when I load the story in test mode, the background is black. What am I missing?
<style>
@import 'https://fonts.googleapis.com/css?family=Cormorant|Cormorant+Upright|Dancing+Script|Great+Vibes|Niconne|Playball';
</style>
body {
font-family: 'Cormorant', serif;
font-size: 35px;
background-color: #fff9a6;
background-image: [img[old-parchment]], fixed;
}
.passage {
font-family: 'Cormorant Upright', cursive;
font-size: 35px;
color: #330066;
}
.passage a {
font-family: 'Cormorant', serif;
font-size: 35px;
color: #5377ac;
}
.passage a:hover {
font-family: 'Cormorant Upright', serif;
font-size: 35px;
color: #ccccff;
}
Comments
There are three errors in your CSS:
1. The <style> and </style> related tags are invalid, remove them both and make sure the import at-rule is at the top of your story's stylesheet tagged passage.
2. The fixed keyword is not valid for the background-image property, remove it and the invalid coma as well.