Twine Pictures, GIFs, and Background Images

PICTURES AND ANIMATED GIFS

nyan

First of all, I do NOT recommend hotlinking (simply copying and pasting the URL from a stranger’s site), because they could delete or change the image at any time. I recommend posting your images on your own site or an image host (like Imgur or Photobucket). You can use <img src= > to add pictures and animated GIF files to your project. When adding this code, make sure that you only use one angle bracket on each side, not two. The web address of the file needs to go after the equals sign, like this:

<img src=http://www.ohiofi.com/img/catdance1.gif>

BACKGROUND IMAGES

Updated 8-31-2017

How to change the background for the entire game

purpleskyHere is how to change the background image when using Twine 2’s default Harlowe format. Click the menu in the bottom-left and then Edit Story Stylesheet. Copy and paste this CSS code to change the Background for your entire game. Replace the URL with the image/GIF that you would like to use.

tw-story {
	background-image:url("http://ohiofi.com/img/The%20Castle%202.png");
  	background-size: cover;
}

How to change the background in the middle of your game

If you’re like me… you’d like to have a farm background when you’re at the farm, to have a castle background when you’re at the castle, and to have a fire GIF in the background when you cast a fire spell. Here’s how to do that. STEP ONE: click the menu in the bottom-left and then Edit Story Stylesheet. You will add the URLs of the background images that you would like to use and give each one a simple name, like “castle” or “harbor.” You can even set an animated GIF as a background.

tw-story[tags~="castle"] {
 background-image:url("http://ohiofi.com/img/The%20Castle%202.png");
 background-size:cover;
}
tw-story[tags~="harbor"] {
 background-image:url("http://ohiofi.com/img/The%20Harbor%202.png");
 background-size:cover;
}

STEP TWO: When you want the background image to change in a specific passage you will add a Tag. Make sure that the Tag is spelled EXACTLY the same as it is in your CSS. It will NOT work if you type “Castle” in one and “castle” in the other. All passages without a Tag will have NO background image.

Example of adding a Tag in Twine

mario

CONTINUE TO THE NEXT POST: Twine CSS

Comments are closed.