Twine Pictures, GIFs, and Background Images

October 23, 2015

PICTURES AND ANIMATED GIFS

nyan

First of all I want to give you a warning... If you simply copy and paste the URL from a stranger's site, they could delete or change the image at any time. 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=https://ohiofi.com/assets/nyan.gif>

BACKGROUND IMAGES

Updated 8-31-2017

How to change the background for the entire game

purplesky Here 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.

mario

CONTINUE TO THE NEXT POST: Twine CSS

« Twine Random Numbers Twine Music and Sound Effects from YouTube »