Rather than having the image displayed using a separate passage, you could just have it display in the current passage.
First, put something like this in your Stylesheet section:
display: none; /* Hidden by default */
z-index: 10000; /* Sit on top of everything */
Just change the “
background-image” to the path and filename of your image instead.
Note: Because the above code is using a relative path there, the image will not show within Twine, it will only be seen in the published HTML file. You could temporarily change that code to use an absolute path, like “
url(C:/Games/MyGame/images/Example.png);”, if you wanted it to work in Twine. However, don’t forget to remove the first part of the file path before you publish the HTML file, otherwise it won’t work on other people’s computers unless they use the exact same file path.
Then, add something like this to the bottom of your passage:
That will wait for 5 seconds, and then display that image as large as possible (without cropping or distorting the image) over everything, and then hide it again 0.2 seconds later (using the jQuery
If you don’t want any empty space on the edges of the image, and you don’t mind the edges of the image being cropped out to fit the screen, you can change the “
background-size” CSS from “
contain” to “