Using Background Images in Twine

## What is a background image?

Background images are a common way to effortlessly fill in the blank canvas or page in your Twine game. It can be any image of your choosing whether it be from the web or from your computer (as long as the image has the appropriate dimensions for most screen sizes).

### Purpose and Significance of background images

In general, background images are usually denotative, to emphasis a direction, tone, or mood subtly. The background image should set the stage for the player, allowing the player to visually see what situation is brought upon them. This can enable players to be aware the environment of the situation, for example: if you are being attacked, the background image should be tinted redder, or it could be darker. Players would then react more intensely due to the brighter background image. In addition, it will be clear to the player when the mood changes as the story progresses when effectively using appropriate background images for each page. It can effectively enhance the immersion for the player, thus creating a better experience.

### How to decide on a background image

It is important to understand that the background image should not have too many details, it should serve the purpose of being denotative. It is not the focal point of your Twine game and it should be used to enhance and support the writing in your passages. Hence, it should set the premise of your passage and be relevant to the story. If you are finding background images from an alternative website, there is a possibility that the image might get taken down if the website goes offline. Whereas it is more secure to have your own website hosting images so that you are able to use at your discretion.

## How to add background images to your Twine game

To start, click the drop menu of your Twine story project at the bottom left corner, next to the Home button. Then open “Edit Story Stylesheet”.

   Now you will be presented with a blank stylesheet where you can upload background image(s).

### Importing images using a URL

If you are planning to find images on the internet and using the URL to upload, you can do so by finding the link. Make sure the URL includes a typical image file extension like .jpeg or .png as it is usually compatible (for example: https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze\_mountain**.jpg**?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752 has .jpg at the bolded part).

Once you have found your URL, copy and paste this code:

```
tw-story {
 background-image:url("PASTE-URL-HERE");
 background-size:cover;
}

```

and replace PASTE-URL-HERE with your URL (keeping the double quotation marks at the beginning and end of your URL). It should resemble this:

### Meaning of the CSS Code

Let’s deconstruct what each line means in this code:

**tw-story {**

Since you are targeting the background images for the story, you will need to declare it by “tw-story” otherwise Twine will not know that and it will not properly execute so you will end up with no background image.

**background-image:url(“PASTE-URL-HERE”);**

This is setting the background image to the URL of the image that is hosted on a website. If the website is down, or the page is missing for the URL, it will result in no background. Hence, it is better to have images from your own website so that you can control when you want the images to be online.

**background-size:cover;**

**}**

This will force the image to fit onto the screen no matter the size; whether it be big or small. As a result, your Twine game will have a wider range of compatibility with different device screens.

### Testing your background image

The stylesheet should automatically save so you can close it and click Play on the bottom right to test and see if your background image is there.

### Selecting a specific background image for a set of pages

Let’s say that your Twine game has multiple pages, and you want to have a different background image for a set of pages and you also want the rest of the pages to be the default background. Well, you are able to with some additional steps!

Firstly, you need to make sure you have at least two pages or more in your Twine story project. You can do this by double-clicking your first passage and encase any character with double-square brackets on each side, for example: [[yellow]].

Exit your passage and you will see your first passage linking to your second one. This is the easiest way to link them and if you want it to branch off to another passage, you can simply do so by adding another option by having any character or word encased by double-square brackets.

Now, we have two passages, and we want to have two different backgrounds for each one. So, we will edit our first passage by double-clicking on it and underneath the title of the passage (default name is “Untitled Passage”) you will notice a button called **+Tag** and we will click on it and name it anything we want, let’s name it “cold”.

We now have the “cold” tag on our first passage. Similarly, we will do this for our second passage, but we will name it something different, let’s call it “hot”.

Now, our second passage, “yellow”, has the tag “hot”. We will return to the stylesheet and modify the code we had for the background-image. Find your background image URL’s for your first and second passage and copy and paste this new code twice for a total of 2 copies of the previous code.

```
tw-story[tags~=""] {
background-image:url("ENTER YOUR URL HERE");
background-size:cover;
}

```

Paste in your background image URL’s. (I will use https://i.pinimg.com/originals/8c/77/c3/8c77c301e437fba9eb4008698765779b.jpg for my first background image and https://cdn.pixabay.com/photo/2017/04/04/16/22/desert-2201707\_960\_720.jpg as my second background image).

As you might have noticed from the code, the first line slightly different, as it is asking for the name for a tag. Previously we have made two tags, and they correspond to that passage. So this means that any passages that you want to have a specific background image, you just add the tag associated with that background image. Let’s enter the names of our tag (“cold” and “hot”).

Using this method, you are freely able to decide exactly which passages in your Twine game that you want to equip a particular background. With infinitely many combinations and many possibilities, this will cement your Twine game to be unique.

## Conclusion

As you can see the dichotomy between these images allows the endless of possibilities to explore with background images in Twine and how they can be of use in order to support the story as well as giving a visual cue to the players on the plot. Background images will not be the most vital part of your Twine game, but it can really bring your Twine game to the next level with the added personalization and customization that you the writer and creator will need to decide to make your Twine game an engaging and enjoyable experience.

1. ↑ https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze\_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752
2. ↑ https://i.pinimg.com/originals/8c/77/c3/8c77c301e437fba9eb4008698765779b.jpg
3. ↑ https://cdn.pixabay.com/photo/2017/04/04/16/22/desert-2201707\_960\_720.jpg