It looks like you're new here. If you want to get involved, click one of these buttons!
<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%; }
Comments
It is generally a good idea to look at a Story Format's default CSS to get an idea of where it assigns it's own CSS and to get an understanding of the structure of the HTML it generates. A couple of pointers:
1. Harlowe setups its base Font and Colours in the html element.
2. Because Harlowe does not use the body element as the parent of the story's HTML structure most CSS applied to that element is meaningless.
3. There are two different HTML structures used to represent links depending on how you create your link, you should cater for both structures in your CSS.
Based on the above a starting point for your customer CSS would look like:
I tested the CSS in your html.bank selector and once I implemented Tag Based Styling I could see your background image as long as that image file and the Story HTML I created using the Publish to File option were in the same location.