I was able to get a background image working from a url leading to imgur, and I'm able to embed images from files within passages. But I can't get the background image from a file. What am I doing wrong?
This works-
<img src="file:///C:/Program%20Files%20(x86)/Twine%202/images/219122.jpg"> */
This works-
/* background image */
html {
background: [img[http://i.imgur.com/QAMjlTl.jpg]] fixed;
background-size: cover;
min-height: 100%;
height:100%;
}
But this doesn't work-
/* background image */
html {
background: [img[file:///C:/Program%20Files%20(x86)/Twine%202/images/219122.jpg]] fixed;
background-size: cover;
min-height: 100%;
height:100%;
}
and I don't understand why. I tried putting just the file name, I tried putting just images/filename.jpg, etc. I don't know what else to do. I eventually would like to have the images zipped with the game so I don't want to rely on imgur if I don't have to, but I can't understand what's going wrong here. I'm sure I'm missing something but I'm really new to twine and html and css etc so hopefully someone can help. Thanks.
Comments
You should be doing something like the following:
Still, if I recall correctly, that should have worked, so I'll look into it. At a guess, it's probably the parenthesis mucking things up.
Note the z-index: 1 makes this image go above the passages, since it's a fade to black. If you're just using the html layer for the background images you don't need to specify the z index.
If this still doesn't work for you then it's a problem with the Twine 2 app specifically, which may be blocking your file for security reasons. I use 1.4 since the Twine 2 app is not suitable for games that use any kind of media due to these kinds of issues.
Thanks, that worked. I'm mostly just stealing code from you two and greyelf in your wonderful posts. Thanks so much, you guys really rock.
One reason I don't want to specify anything like that is if I distribute my game as a node.js app, I have no guarantee that it will be installed onto a C drive.
So for me, the [img[zzz.jpg]] thing works fine as it works wherever the game is.
See I can't get that to work either, I'm not sure why.
k3lit0 is probably either using the app (NW.js-based) version of Twine and testing via Test/Play, which currently makes it extremely difficult to use relative paths (Publish does not have this problem). If they're using the browser-based version, then they're probably putting the files in the wrong place.
Beyond that, I've fixed the wiki image interpolation bug you ran into, so parenthesis won't be a problem there anymore. Everyone should get that as soon as the next Twine 2 refresh comes out (or sooner, depending).
Thank you. Hopefully that helps some people.