Hi all,
Can someone look at my CSS below and see what I'm doing wrong here when it comes to the backgrounds.
I've set up a couple that work with tags on passages (bank from below) and it's worked in other games I've made, but over here, if I tag a passage bank, it refuses to show an image "bank.jpg". Keep in mind, the image IS kept in the same folder as the html game file, and it is not the Twine install folder.
Can someone look at my CSS below and see what I'm doing wrong here when it comes to the backgrounds.
I've set up a couple that work with tags on passages (bank from below) and it's worked in other games I've made, but over here, if I tag a passage bank, it refuses to show an image "bank.jpg". Keep in mind, the image IS kept in the same folder as the html game file, and it is not the Twine install folder.
<head>
/* basic elements */
html {
margin: 0;
padding: 0;
background-color:#000000
}
body {background-color:#000000!important;}
tw-link {
/*display:block;*/
/*background-color:#fdff00;*/
color:#ff9933;
font: 100% Arial, sans-serif;
font-style: normal;
line-height: 0.8;
margin:0px;
border-radius:0px;
width:auto;
}
tw-link:hover {
/*display:block;*/
color:#ffbf80;
font-style: italic;
padding: 2px;
border-radius:1px;
width:auto;
}
.visited {
color:#ff9933;
font: 100% Arial, sans-serif;
font-style: normal;
line-height: 0.8;
margin:0px;
border-radius:0px;
width:auto;
}
.visited:hover {
color:#ffbf80;
font-style: italic;
padding: 2px;
border-radius:1px;
width:auto;
}
tw-passage {
color:#fff;
font: 135% Georgia, sans-serif;
line-height: 1.4;
/*margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: auto;*/
animation: type 0.5s steps(60, end);
}
tw-passage:nth-child(2){
animation: type2 1s steps(60, end);
}
@keyframes type{
from { opacity: 0; }
}
@keyframes type2{
0%{opacity: 0;}
50%{opacity: 0;}
100%{ opacity: 1; }
}
@keyframes blink{
to{opacity: .0;}
}
body {
font: 100% Georgia, sans-serif;
line-height: 1.8;
margin: 0;
padding: 0;
}
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #ffffb3;
}
p {
margin-top: 0;
text-align: justify;
}
tw-icon {
display: none;
}
html.bank {
background-image: url("bank.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
background-color:#000000;
}
html.quaid {
background-image: url("./images/Intro/quaid.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
}
tw-story {
@include flexbox;
@include flex-direction(column);
width: 80%;
@if $version == 2 {
width: 100%;
height: 100%;
}