Need image to cover entire screen in one particular passage only

Authoring Twine
1

Twine Version: 2.10.0
[also choose a Story Format tag above] Sugarcube 2.37.3

Can anyone show me how to add CSS to Stylesheet section and then correctly use that in one particular passage to make an image fullscreen?

2

I found this, but I donā€™t know how to apply it (hook up the plumbing, so to speak) in Twine Sugarcube.

3

the body and html tags still exist in twine, so you could try pasting everything between the <style> tags into your stylesheet (using your own image) and see what you get

4

If you want to add CSS code specifically for one (or more but not all) passage you can include it in:

  • <style> in the relevant passages
  • add a tag to the relevant passages and use [data-tags~="The-Name-Of-The-Tag]" in the StyleSheet
:: StyleSheet

body[data-tags~="The-Name-Of-The-Tag] {
 background: red
}
5

so, if I had the following CSS in the stylesheet section, would tagging desired passage with ā€˜bgā€™ work?

.bg {
  /* The image used */
  background-image: url("images/bsod.gif");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
6

You can but a better version in that case would still be

body[data-tags~="bg"] {
   /* Your code */
}

(so you attach it to the correct element too)

7

Works in Twee3 with Tweego, but not in App Twine. I must be overlooking somethingā€¦

Okay, my images, relative to my compiled HTML game file, are located in subfolder images.

I have given the Story Stylesheet this code:

body[data-tags~="bsod"] {
  /* The image used */
  background-image: url("images/bsod.gif");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

Then, I tag the desired passage with bsod.

But itā€™s not displaying the image.

8

The Desktop release of the Twine 2.x application creates a number of folders it uses internally to store things like: Project HTML files; Backup HTML files; the temporary Story HTML files generated by the Play and ā€œTest relatedā€ options.

If you want your Relative URL referenced images to appear when the applicationā€™s Play and ā€œTest relatedā€ options are used them those images need to be stored relative to the temporary HTML files those options create, which are NOT the Project HTML files stored in the folder that is accessible via the applicationā€™s View > Show Story Library toolbar options.

Because it can be difficult to store a projectā€™s external media files relative to those generated temporary HTML files, the general advise is to:

  1. Create your own folder structure somewhere other than the folders the application itself creates.
  2. Store your media files in your folder structure.
  3. Use the applicationā€™s Publish to File option to create a Story HTML file for testing, which need to be saved into your folder structure.
  4. Open that Story HTML files in your web-browser.
  5. Repeat steps 3 & 4 each time you want to test something.

On Windows, such a folder & file structure for a project named ā€œadventureā€ could look something like:

c:\adventure\
    images\
        forest.png
        home.png
    audio\
        bird-song.mp3
        lawnmower.mp3

ā€¦and the ā€œpublishedā€ Story HTML file would be saved into the c:\adventure\ folder.

1 Like
9

@Greyelf Thanks, thatā€™s very interesting! Iā€™m only publishing on the web for now, but Iā€™ll definitely bookmark this for future reference :slight_smile:

10

Potential solutions?

  • the tag is not correctly coded (:: PassageName [tag])
  • you didnā€™t save before recompiling/testing
  • Something else went wrong while compiling (e.g. your .css file or StyleSheet is not in the source folder)
  • the URL of the image is not correct (e.g. typo, wrong name, extension, etcā€¦ itā€™s ALL cap sensitive btw)
  • there is other code later in your StyleSheet that overrides this
  • there is an error earlier in your StyleSheet that makes it not load the rest of the CSS code

(itā€™s a bit hard to say where something is wrong without having the files :sweat_smile: )