Background image from file (Sugarcube)

k3lit0

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.

TheMadExile

You really shouldn't be using the wiki image markup inside CSS for anything other than image passages (which are unsupported by Twine 2 at the moment).

You should be doing something like the following:

background: url("file:///C:/Program%20Files%20(x86)/Twine%202/images/219122.jpg") fixed;

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.

Claretta

This is real working code from my SugarCube game that you can see in action in the video I posted in the WIP forum:

#supertop.blanket {
background: [img[images/zzz.jpg]] fixed;
position: absolute;
background-size: cover;
z-index: 1;
width:100%;
height:100%;
top:0;
left:0;
animation: fadeOut 6s 1 forwards;
}

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.

k3lit0

TheMadExile wrote: »

You really shouldn't be using the wiki image markup inside CSS for anything other than image passages (which are unsupported by Twine 2 at the moment).

You should be doing something like the following:

background: url("file:///C:/Program%20Files%20(x86)/Twine%202/images/219122.jpg") fixed;

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.

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.

Claretta

TheMadExile wrote: »

You really shouldn't be using the wiki image markup inside CSS for anything other than image passages (which are unsupported by Twine 2 at the moment).

You should be doing something like the following:

background: url("file:///C:/Program%20Files%20(x86)/Twine%202/images/219122.jpg") fixed;

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.

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.

k3lit0

Claretta wrote: »

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.

Claretta

As I wrote above it might be a file permission issue with the Twine 2 app.

TheMadExile

It's unlikely to be a file permission issue. More likely it's a simple path issue.

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.

k3lit0

I am indeed using the windows app and testing. It's OK for now, and if i finish the game and publish I'll worry about it then. It's good to know that should work. Thanks. I actually moved the twine folder to documents to avoid that parentheses in the programs folder.

TheMadExile

Parenthesis aren't a problem for the url() functional notation, as long as you quote the URI.

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).

k3lit0

TheMadExile wrote: »

Parenthesis aren't a problem for the url() functional notation, as long as you quote the URI.

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.