"Sticky" header image in Harlowe?

Authoring Twine
1

Twine Version: 2
Story Format: Harlowe 3

Running into some weirdness with Harlowe CSS, looking for some pointers!

I have an image I whipped up that’s supposed to make my passages look like they’re taking place in an old Windows 95 window. I have two versions of my game with two different approaches to adding this image; one of them makes the image responsive to the size of the browser window but isn’t “sticky”, whereas the second method keeps the image at the top of the screen like I want but the size and positioning is all wrong and I’m not sure how to change this.

Here’s my first method, where I don’t create a “Header” passage and the image just displays at the top of every passage instead:

header, tw-story {
background-image: url("header.png");
	background-repeat: no-repeat;
	background-size: contain;
}

And here’s my code from the second attempt, where I have the image stored in a “Header” passage, and it stays on top of the page like I want, but when I load this version the image is fixed in the center and doesn’t respond to the width of the screen:

tw-include[type="header"] {
	display: inline;
  background-size: auto;
  background-repeat: no-repeat;
  min-height: 100vw;
  min-width: 100vw;
    top: 0;
  margin: 0;
  padding: 0;
  padding-top: .5em;
  padding-bottom: .5em;
  position:fixed;
  z-index:100;
}

Any tips? I’m sure this is a simple fix, but it doesn’t seem well-documented anywhere and I can’t quite find a solution that does what I’d like it to do. Thanks so much!

2

I haven’t tested it out myself, but my first instinct would be to go with the one that makes it display properly in the window, then ass the CSS sticky position class to it.

3

Have you tried the first with background-attach: fixed? That should fix it to the viewport so it doesn’t scroll, I think.

4

Okay, so I tried that and it doesn’t look like Harlowe recognizes position: sticky? The text doesn’t go blue in the Stylesheet like the other valid commands do, and nothing seems to happen. I may very well be doing it wrong, however!

5

Okay, so this totally worked, BUT now I’m getting that classic issue where everything in the actual passage is scrolling up over the header? I tried setting the z-index but it didn’t seem to help. Any thoughts?

6

Do you have a mockup or sketch of what you want it to look like? I’m not sure I fully understand what you’re trying to do.

7

Alright, good point, I tried to grab some hasty snips to indicate what I was trying to do here. (Also, please excuse the image from Snatcher, I was using that to test backgrounds until my art assets were done lmao)

The first image shows the header working like normal, right?

bunny snip for header 1.PNG
bunny snip for header 1.PNG1907×877 108 KB

But when I start scrolling, this happens, where the text and BG image continue up over the header, when they should scroll under it like on any website with a sticky header (like this very forum!):

bunny snip for header 2
bunny snip for header 21886×391 121 KB

I know there’s a few tried-and-true CSS methods to get this to stop, like top: 0; and z-index, but they don’t seem to be working for some reason? I’m sure I’m just missing something, but I’m so close to figuring it out and I’m not sure what to do to change it!

8

Ah, yeah, I don’t know why I didn’t get that.

OK, I think your second one should work except that you’re not setting the background on the tw-include[type="header"] element.

tw-include[type="header"] {
  background-image: url(header.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
}

Then you’ll still want to put some padding at the top of tw-story so the bar doesn’t hide the start of the text, but that should get you close, I think?

9

Thank you so much for all the help so far!