Twine Tutorial

How to set the background of you webpage as an image in Twine

1.) Open up Twine and select and save the image you would like to use for your background.

2.) Once you have the image you would like to select, you need to go add a new stylesheet to your Twine project. You can add a new stylesheet by going to Story –>New –> Stylesheet

twine1

3.) This will take you to a new stylesheet that has not been filled in at all yet. Click on the stylesheet, and the empty one should look something like this.

twine2

4.)In the body section of the stylesheet between the curly brackets, indent and the place the tag “background-image:” in the stylesheet.

5.) After placing this tag here, you need to put the .jpg filename right after “background-image:”, but the image you want to use must be inserted using the code Twine uses to insert pictures. The format goes like this: [img[your_filename.jpg]]. And the whole statement must end with a semi-colon (;).

Twine3

6.)After this, you should have successfully inserted an image as your webpage’s background.

 

Leave a Reply