How to Put Image Above Text Box

Authoring Twine
1

Twine Version: Twine 2.5.1
Story Format: Harlowe 3

Hello!

I’m having trouble putting images above the text box without the text being altered along with the image. Here is what it currently looks like:

Screen Shot 2022-11-25 at 11.54.21 AM
Screen Shot 2022-11-25 at 11.54.21 AM1920×1086 58.8 KB

The text and footer move along with the image and the text box shrinks and remains empty.

Here is what my stylesheet looks like (the image section at least):

#image{
    z-index: 1;
    top: 10%;
    bottom: 20em;
    width: 50%;
    position: fixed;
}

.responsive-image {
  height: auto;
  width: 75%;
}

I have not edited other sections of the stylesheet to accommodate these images. As well, here is what it looks like within the passage (I’ve inserted this above the text, if that matters):

<div id="image"><img class="responsive-image" src="start1.PNG">

I got these tips from here and here but cannot figure out what I’m doing wrong.

Thanks in advance for your tips and tricks!

2

Can you supply a copy of the full contents of the Passage in which the image is being displayed, as the example you gave only includes the start tag of an <div> element (the end tag </div> is missing) as well as the <img> element you want to displayed, so we don’t know what affect the other Passage content may have of the positioning of the <img> element.

eg. your screen-capture shows a horizontal menu of links? followed by a black rectangle, which may be the “text box” you spoke of.

note: If you are using the header and/or footer special Passage Tags in your project then a copy of their contents would also help, as their content is pre-pended/append to that of the “current” Passage being shown.