How can I have a non-scrolling image over text?

Question

I would like to make a game with a UI, similar to a lot of first person point-and-click adventures (Shadowgate for example), where the top half of the screen will display an image of your location (or whatever you are seeing) and the bottom half will display all the text. I want to make it so that when the player is scrolling through the text, the image doesn't scroll along with it, but stays on the screen. I suppose this can be achieved if the image is somehow displayed over the text and scrolling is disabled. I am not quite sure how to do this, though. I am using Sugarcube 2.21.0 and I am still very new to CSS. Can anyone help me with this?

 

Thanks!

Answer 1

You could just create a new div that holds your image. In the following example I got rid of Sugarcube's UI-bar. If you want to keep the bar, you'll have to play around with the css and see what ends up looking right. First we set up the new elements in our CSS-stylesheet:

#passages {
  position: absolute;
  top:50%;
  width:50%;
  left: 50%;
  bottom; 1%;
  transform: translateX(-50%);
}

#picture {
  background-color: #111;
  position: fixed;
  width:50%;
  bottom: 50%;
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
  border: 1px solid white;
}

Then add them via our JabaScript section:

UIBar.destroy();
$('<div id="picture"></div>').appendTo(document.body);

Then we call the appropriate picture within our passage like this:

<<replace "#picture">>Your Picture<</replace>>