How to set the background of you webpage as an image in Twine

1.) Open up Twine and select and save the image you would like to use for your background.

2.) Once you have the image you would like to select, you need to go add a new stylesheet to your Twine project. You can add a new stylesheet by going to Story –>New –> Stylesheet

3.) This will take you to a new stylesheet that has not been filled in at all yet. Click on the stylesheet, and the empty one should look something like this.

4.)In the body section of the stylesheet between the curly brackets, indent and the place the tag “background-image:” in the stylesheet.

5.) After placing this tag here, you need to put the .jpg filename right after “background-image:”, but the image you want to use must be inserted using the code Twine uses to insert pictures. The format goes like this: [img[your_filename.jpg]]. And the whole statement must end with a semi-colon (;).

6.)After this, you should have successfully inserted an image as your webpage’s background.

https://youtu.be/QS96SE_uUiI

When I first launched Twine and started building a story, something that stuck out to me was the tag box on each passage.

In the beginning I just ignored the box since I didn’t know what it was for and didn’t want to screw anything up. But eventually I got too curious and looked it up. It turns out that putting a tag on a passage doesn’t do anything immediately. The biggest use of the tags is for CSS styling.

My plan for my project was to have different background images on each passage based on what was happening in the story and where the player was in the desert. Tags turned out to be a really easy way to do this. When you want some CSS styling to apply only to a certain passage, you pick a tag for it (the only constraints being that it hasn’t been used before and that it’s one word). Then in the CSS you put: body[data-tags~=”TAG”] and then anything you put in that body will only apply to passages you tagged with “TAG”.

The above is a sample from my project. In the code, I made it so that any passage tagged with “highway” would have a certain image as a background and that it would stretch in order to cover the whole page. You can do a lot more with the tag styling such as different fonts/sizes, different link and list styles, etc., but the background image was the only thing I wanted to change from passage to passage.

The only problem with this method of background images is that it takes a very long time for the code to compile and therefore loading times are long. Loading time problems combined with time constraints kept me from individualizing the backgrounds as planned.