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

Project Help Programming
1

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:(https://cdn.discordapp.com/attachments/527618595920937000/541682884881154058/concept.png)`

2

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).

1 Like
3

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.

1 Like