I can't set a background image using Twine 2, Sugar Cube 2.21

Question

body {
  background-image: url("images/creation.jpg");
  background-attachment: fixed; 
  background-repeat: no-repeat;
  font-family: Georgia;
  font-size: 130%;
}
a {
  color: #6495ED;
}
#story {
  margin-left: 3.5em;
}

Here is all the code I have in CSS, can someone explain to me why the background is not the image there. Also yes I've checked that the directory is correct and everything.... if there is anything Else I need to do please tell me.

Answer 1

The Test and Play options of Desktop release of the Twine 2.x application don't support Relative URL based media references, so you will need to do one of two things.

1. Simply use the Publish to File option to generate a story HTML file, and save that file in a location relative to where your media files are.

eg. If your folder & file structure looks something like the following...

c:\adventure
	\images
		creation.jpg

... then save your published story HTML file within the c:\adventure folder.

2. Setup your project to use:
a. Absolute URLs when viewing your images within the Test and Play options.
b. Relative URLs when viewing your images within a published story HTML file.

This can be done using a implementation like the one described by HiEv in this answer, although you will need to modify it somewhat to handle CSS based background images.

warning: the information about the folder & file structure on your hard-drive will be embedded within any published story HTML file and available to anyone playing your story, unless you delete that information before you generate that story HTML file.

Comments

The method I used in that post won't work in CSS.

However, the rather simple solution is to do this:

background-image: url("images/creation.jpg"), url("C:/adventure/images/creation.jpg");

That way if the first image fails, it will fall back to the next image.  So that would work both inside Twine and as a published HTML file, assuming the path and filename are correct.

Also, keep in mind that in some browsers and OSes that the capitalization matters.  So if the path and filename are all lowercase, but you use some uppercase, then it will work in some situations (usually Windows) but fail in others (Mac/Linux).  So make sure that the capitalization in your code always matches the capitalization of the actual files and directories.