How to change the background image of certain passages? (Twine 2.0.10 Harlowe 1.2.1)

zoelibat

Hello Twine-masters,

I am new to Twine and a novice to programming in general so i guess my question/problem will be boring for you but it's very important to me because it is part of my master-thesis.

I am using Twine 2 version 2.0.10, the Storyformat Harlowe 1.2.1 and started learning with these tutorials ( ) and I really like it!

I want to make a very simple and small story with passages where you can click on different things and some text will appear. Something like:

"You're standing in a room. What do you want to do?"
Search the cupboard *click* It's empty.
Take the bottle *click* You have taken the bottle. (but no inventory or something like that)
Open the door *click* Next passage.


My Question:
To get the feeling of standing in a room I want to have the picture of a room as background. And when I change the room/passage another background picture should appear. (I am going to upload pictures to my dropbox and want to use these.)
The last days I looked at almost every question in this forum, YouTube and google that could be the same as mine but nothing worked out for me and I'm terribly sorry. So I have to make a question here.

Is there an easy way or routine or maybe a bunch of code that I can use in the Style Sheet (or somewhere else) to change the background image of certain passages?
I'm thinking of some code that can just be copy pasted for every passage I want a new background in and I only have to rename the linked passage?

Maybe something like this:

body {
passage1 background-image:url("link of the picture1");
}

body {
passage2 background-image:url("link of the picture2");
}

body {
passage3 background-image:url("link of the picture3");
}

Is that somehow possible? Or something similar?
Everything would help me!

Thanks in advance
Matt

greyelf

You could use the solution from the Basic Harlowe Passage Tag Based Styling thread to do something similar to what you want, except you would need to change the solution's related CSS to something like the following:

html.desert body {
	background-image: url('desert.jpg');
}

html.forest body {
	background-image: url('forest.jpg');
}

zoelibat

It's working perfectly fine!

Yesterday, I have already tried what is described in the Basic Harlowe Passage Tag Based Styling thread but I didn't understand how the tags work. But you made me understand it now.

Thank you, greyelf. You are awesome!