Adding a background to Twine CSS

Twinescreen

As I work through the next version of my Interactive Fiction I started looking into changing how the background is displayed. Once I remembered my CSS, this turned out to be simple.

twinecsshack

(Please excuse the poor colouring here)

To make this change I first exported the file to html and dropped it into a folder. I then created the background image and saved it into the same folder as the html file.

To make the change you then have to click on the button at the bottom left and click “Edit Story Style”.

This make the CSS window open (empty)

Then you add

tw-story {
background-image: url(“tw_bg.png”);
}

This (as shown in the above image) only changes the main display section where the main body of the text appears.

There is more here that can be edited, tw-story is the main holder container and you can change the fonts and the colours also from here.

I’m tired so thats all for now,

see you in port next time Airship Captains.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s