harlow background

Question

What is the correct code I should use to establish a background image in my twine? I am using Twine 2.0. I need to use a relative path. The device this Twine will be played on will not have Internet access.

Answer 1

warning: You can't see relative path media while using the Test or Play options of the Twine 2.x application.
note: I will assume you want the background image to cover the whole area.

1, You will need to create a parent-child folder hierarchy to contain both your 'published' story HTML file is, as well as the images. I will assume it looks something like the following.

C:\mystory\
	story-name.html
	images\
		forest.png

eg. You have a folder:to store your story HTML file in (I named it mystory), and that that folder has a child-folder in which you have stored your image files. (I named it images)

2. You will need to place CSS like the following within your project's Story Stylesheet area, it uses a relative URL to reference the forest.png image within the images child-folder.

tw-story {
	background-image: url("images/forest.png");
	background-repeat: no-repeat;
	background-size: cover;
}

3. You will need to use the Publish to File option to create a story HTML file, and save that HTML file within the parent mystory folder.

4. If everything is done correct then you should be able to see the background image when you view the HTML file within your web-browser.

warning: Remember to bundle the image files contained within the child-folder which the story HTML file when you want others to view your story. I suggest using something like a ZIP archive file to do this.

Comments

I tried the code, it worked! mostly... My background image doesn't extend over the full width of my story. Is there a way that I can put the main passage in a bordered box with some padding between the sidebar image and the main passage OR can I get the background image to extend fully in the back?

I have a picture but unable to attach it.