How do I make an image that's behind the text as background? [Twine 2]



I know basics of placing images in Twine 2 and changing UI colors, but how do I change the background of my story? Something like this:(`


Quick disclaimer I dont use twine and really only messed with it slightly out of curiosity; so take what I am going to say with a grain of salt.

It looks like twine uses a variation of CSS styling using the tw-story class to style their pages. According to some quick googling I did apparently there are two ways of doing this:

  1. Global background - This seems to be for specifying a default background and is done by creating a tw-story class with the background-image property set in it.
  2. Tag based - Same as above but only applies the style to passages with the correct tag. Can be done by adding [tags~="tagName"] to right after the tw-story class (would look like tw-story[tag~="tagName])

Here is a small video that explains it a bit better than I can:

One thing to note about his vid though is he talks only about loading from a url, but if it is a standard CSS or close to it you can load it from a directory on the computer that is running the game. If you want to learn more about that I would suggest looking up information on the background-image property in CSS and Twine 2.0 (in case twine does any special modifications to it).


It’s worth looking at the specific story format you are using. SugarCube does things differently to the others and can still use images embedded as passages rather than a specific URL (providing I think that you build with Tweego) - so you don’t have to zip up the generated HTML and image directory/folder.

I think that if you just want to style just the story area (and not the menu part) you will need to mess with the CSS.