+1 vote
by (370 points)
closed by
I want to put some of my passage texts in front of full page background images.  

I thought I could use My Story CSS stylesheet, shown below, to place the images as a background.  But, it doesn't seem to make any of the changes I was testing.  Any help would be appreciated.  

body {
}

.redo { display:none; }
.undo { display:none; }
}

background: url(earthmoon.jpg) no-repeat center;
background-color: white;
tw-passage {
  background-color: #FF0000;
tw-sidebar {
  display: none;
}
tw-link {
  color: red;
}
.aClass [
color: gold;
}
#aID {
color: red;
}
closed with the note: question answered and solved

3 Answers

+2 votes
by (590 points)
gotta remember to tag your question with what story format and twine version you're working with! i personally don't know how to do this yet myself, was plannign on learning when i needed to, but check the comment here for a solution if you're doing sugarcube 2:

https://twinery.org/questions/1688/how-to-add-images-gifs-as-backround-in-sugarcube-2?show=1689#a1689

it includes a link for stuff applicable to harlowe format, it might be outdated though
+2 votes
by (63.1k points)

Your CSS is...weird. 

body { >>why is this empty? 
}

.redo { display:none; }
.undo { display:none; }
}>>>>what is this brace for? 

background: url(earthmoon.jpg) no-repeat center;>>> quote urls
background-color: white;>>>none of this is associated with a selector, its just floating here. 
tw-passage {
  background-color: #FF0000;>>>this curly brace was never closed 
tw-sidebar {>>>this will all be ignored because the brace above was never closed
  display: none;
}
tw-link {
  color: red;
}
.aClass [
color: gold;
}
#aID {
color: red;
}>>>last three are fine 

You just need to clean up your syntax. CSS doesn't throw errors, it just ignores anything it can't understand. Look at @onenaa's link for some examples of how CSS should generally look. 

0 votes
by (159k points)

As noted by @onenaa you need to state the name and full version number of the story format you are using as answers can be different for each one, and I suggest using the question tag system to do this instead of adding that information to the question title.

Based on the name of some of the selectors in your example CSS I will assume you are using Harlowe, unfortunately when it comes to CSS knowing the series (1.x or 2.x) can be important because they have slightly CSS defaults and HTML structures. Now that you have added a story format name and version tag we know which you're using.

Besides the issues pointed out by @Chapel I also noticed the following:

1. If you are hiding the tw-sidebar element then you don't need to also hide the .redo and .undo classed child elements, because they will automatically be hidden when their parent is.

eg. Delete the following two child rules.

.redo { display:none; }
.undo { display:none; }

... and leave in the parent rule:

tw-sidebar {
	display: none;
}

edit: After seeing that the harlowe2.0.1 tag has been added to the question

2. It is unclear in your example which element you background image & colour attributes are targeting.

by (370 points)
edited by
Thanks for everyone's input.  I shall have another look to clarify my position. I haven't used CSS for some time and I'm thinking that I don't have any targets for my CSS!
by (159k points)
All CSS selectors are targeting something.

eg. the whole document, a particular type of HTML element, an element with a particular ID, all elements with a particular class, etc...
by (370 points)
edited by

I used this in the CSS stylesheet with passage tags, and it worked fine. 

tw-story[tags~="earthmoon"] {

  background-image: url("images/earthmoon.jpg");

  background-repeat: no-repeat;

  background-size: contain; 

  color: white;

}

 

This also worked fine in passages as inline CSS.

<head><style>

tw-story {

  background-image: url("images/sticky-note.gif");

  background-repeat: no-repeat;

  background-size: contain;

  color: black;

}

</style></head>

 

Part of my confusion was with targeting Twine elements.  I am aware of the following ones but I am not exactly sure how to use them.    

I think that you can use the built-in hook names: ?Page for <tw-story>

, ?Passage  for <tw-passage>, ?Sidebar for <tw-sidebar>and ?Link for <tw-link>

...