Backgrounds defined in CSS - not showing (Harlowe)

jhaque · June 2016

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.

<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%;
	}

greyelf · June 2016

Because Harlowe does not have a Tag Based Styling feature built-in I am going to assume you are using a technique like that found in the Basic Harlowe Passage Tag Based Styling thread to add the feature to youre story.

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:

html {
	background-color: #000000;
	color: #ffffff;
	font: 135% Georgia, sans-serif;
}

tw-story {
	line-height: 1.4;
}

tw-link, .enchantment-link {
	color: #ff9933;
	font: 100% Arial, sans-serif;
	font-style: normal;
	line-height: 0.8;
}

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.

Howdy, Stranger!

Categories

Backgrounds defined in CSS - not showing (Harlowe)

Comments