Locally adding image as background

jvemp

Ok so I'm trying to figure out how to locally reference an image for the background. It took some digging but I figured out how to display an image in a passage like so (done in Snowman):

<img src="C:\Users\Me\Documents\Twine\Stories\my fire emblem wife.png" width="300" height="500">

And I know that in CSS both background: and background-image: can be used to set an image as the background but I haven't been able to figure out the right code combination to actually work. I always just get a white background, and I'm not sure if this is a thing where it won't appear when I do test/play but it will show up in publication (I read this may be the case for some) but since I got the other way to show up I feel like it's just not working. Anyone have any ideas or should I just stick to referencing url's to make it easier?

greyelf

There are two issues with your fully referenced image:

1. The image file name "my fire emblem wife.png" has space characters in it.

This can cause problems depending on the operating system of the person reading your story. It is a good idea to replace those space characters with either a minus sign "-" or an underscore "_", so your file name would become either "my-fire-emblem-wife.png" or "my_fire_emblem_wife.png"

2. It is fully referenced.

It is likely that the "C:\Users\Me\Documents\Twine\Stories\" path will not exist on the hard-drive of the person reading your story, which means that the image file will not be found.

Currently there is no simple method to have locally stored image file appear when using the Test and Play options that will also work correctly when you supply other people a copy of your story HTML file created using the Publish to File option. This is because the temporary HTML document created by the Test and Play options does not exist in a location that we can reference, which means that image files can not be stored relative to that location.

If you want to use locally referenced media files then I suggest reading the Image background vs regular ol' image insert thread.

jvemp

Thanks I got it to work when I play it on my local computer! But when I upload it online the pictures don't show up, which I guess is a no-duh... I'll have to upload the pictures to reference online then right?

greyelf

If you use relative references then the external files need to be stored in the same location as the story HTML file. So if you upload the HTML file to a web-server then you will also need to upload the external files.

jvemp

Ah aight. Thanks for the help my dude