›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

my background image will not load in Twine 2.0.11, Harlowe (on my Mac OS El Capitan)

kookidookikookidooki
in Help! with 2.0
Hi there,

I am having problems with Twine 2.0.11 Harlowe story format. The background image is not loading. I did not have this problem with Twine 2.0.2. I have tried so many different variations, including single quotations, have scoured the web over CSS solutions, and nothing works.

I have the Twine app in the same folder as another folder called "images" ,which is why I have the path directory below. The image in question is a jpg. I have tried other images too, and that doesn't work either.

My code is the following:

body {
background-image: url("images/alien.jpg");
background-size: 100%;
background-repeat: no repeat;
}
tw-story {
font-family: 'Arial', monospace;
color:#ff0000;
font-size: 2.0em;
}


Thank you for your help.

Comments

  • greyelfgreyelf
    The issue is that for your background-image's relative url to work when using the Test and Play options it has to be relative to the temporary HTML document begin created, but this is not easy when the document basically only exists in memory. (and maybe as a temp file in an unknown/uncontrollable location).

    This is why media referenced by relative url's only work if you use the Publish to File option to create a Story HTML file, and if you save that HTML file in a location relative to the one you are storing your media files in.

    note: This location should not be the folder you installed the Twine 2 application into, and it should not be the folder that the Twine 2 application stores your Story Project HTML files into. **

    I suggest you create your own folder to store your Story HTML files into, and create your "images" folder within it.

    (** which is accessed via the Twine -> Show Library menu items)
  • kookidookikookidooki
    @greyelf, thanks for the tips, I appreciate it very much.

    This is what I have done:

    1. I have moved my Twine app to my Applications Folder and created an alias on my desktop bar.
    2. I have also moved my images folder (where the jpg image is located) into my Documents -Twine- Stories directory (which I accessed via Twine -Show Library) where my Twine html story files are saved by default by Twine. My background image still doesn't load.

    I don't know how to create my own folder and ask Twine to store the html files there because it, by default stores them in the Documents-Twine-Stories.

    Thanks again!!!!
  • kookidookikookidooki
    PS - I tried creating my own folder called storyfiles on my desktop, where I have an html file that was generated through Publish File. The images folder is there too. The image still doesn't work. Thanks!!
  • kookidookikookidooki
    PS I also tried creating my own folder in my HD/users/Me/ directory. I now have two folders, one, the Twine folder, where Twine stores the html files by default. And another folder, in the same directory, called Twinestories, where I have a published html file stored and the images folder. The background image still doesn't work.
  • kookidookikookidooki
    Oops! I figured it out.
    So, now it seems to work??

    When I open my html file, the background image is there. But, when I test my file through Twine through Test or Play, the image is not there.

    Anyway...
  • ClarettaClaretta
    edited June 2016
    Best guess is that in the new download the Harlowe css was changed somehow. Maybe the story area has a solid colour background and is a higher z-index than the body.

    Try putting

    background-color: transparent;

    in your tw-story css section.
  • kookidookikookidooki
    I have the same problem now with embedding images into a passage. In other words, in the published html file, the images are all there (background image and embedded image)...but when I hit Test or Play in Twine, they don't show up. I tried the above Claretta, but it doesn't work.

    Thanks!
  • greyelfgreyelf
    edited June 2016
    There seems to be some misunderstanding of my previous post, so I will try to be more clear.

    note: The following information is based on my possible incomplete knowledge of how a node-webkit applications works (and in particular the Twine 2 application) but none of the Twine developers have ever supplied a contradicting response, nor have I read one else where. If someone else knows better please speak up.

    1. It is NOT possible to see a media file referenced using a relative URL when using the Test and Play options. This is because when you use those options there is NO temporary HTML file for the media file to be relative to.

    2. Do NOT store your own files within the folder accessed by the Twine -> Show Library menu options, that folder is for the Twine 2 applications internal use only as it is where your Story Project HTML files are stored. If you damage or override one of the HTML files contains within that folder you could loss one-or-more of your Story Projects.

    note: the Story Project HTML files are NOT standard HTML documents!

    3. You can ONLY see relative referenced media files if you use the Publish to File option to create a Story HTML file, and if you save that HTML file within a location on relative to where you have stored your media files.

    4. Do NOT use the folder(s) you have installed the Twine 2 application into as the location you store either your Story HTML file or the relative media files in. Create your own folder(s) on your local hard-drive to store your Story HTML file and your relative media files into.
  • kookidookikookidooki
    Thanks very much @greyelf for the last answer. It's a great clarification and helps tremendously.
  • ClarettaClaretta
    Oh yeah now I remember. The major change from 0.2 to .11 was going to a nw.js app.
Sign In or Register to comment.