How to add images/gifs as backround in Sugarcube 2?

Question

I would really appreciate it if anybody could help me out on this, I'm using Sugarcube 2 with Twine 2. I am new to Sugarcube. I know the basics to twine (stylesheet and all that good stuff). I want to know how to set an image or gif as the backround (only to certain passages) Thanks! :)

Answer 1

You can use CSS to make this happen, and use passage tags to control it. Relevant documentation. CSS backgrounds. 

Example. Assume the tag you want to use is "forest." 

in story stylesheet 

body.forest {
  background-image: url("www.yourimagehere.com/blah.gif");
  background-attachment: fixed; 
  background-repeat: no-repeat;
  background-size: cover; /* maybe contain, based on the image and goals */
}

Then, to use it add the passage tag "forest" to any given passage. 

This should work fine with GIF files. 

Comments

out of curiosity, because this is css and the way twine works with html, your code works for both harlowe and sugarcane right?

---

out of curiosity, because this is css and the way twine works with html, your code works for both harlowe and sugarcane right?

No, not as is. They have different html structures, and different ways of accessing tags in CSS. SugarCube add tags as classes, but in Harlowe you'd need to access the attribute (for v2.x) or set it up so that tags are added as classes (for v1.x). The idea is the same, but you'd need to change the selectors. 

Here's a link to a relevant forum post by greyelf from the archive. The initial post deals with Harlowe 1.x. Later in the thread is an update for working with Harlowe 2.x. 

I don't recommend using Sugarcane at all if you can avoid it; it's probably better to install SugarCube 2 if you're using Twine 1. It's outdated and no longer supported by anyone. Of the Twine 1 formats, the only one you might want to use is Jonah, and even then only if you really, really need its specific feature set.