[Twine Sugarcube - Pinning an Image to the top of the page]

Hello, I need help with sugarcube 2 twine 2, I need to have an image pinned to the top of my page that is not affected by the scroll! [linked image url removed by Mod] like on a messaging app.

@UndelFineD - As I mentioned above, new questions should be asked in new threads, and thread titles should be descriptive of the question.

[Topic split by Mod - thank you!]

That said, most likely you’ll want to use the CSS “position: fixed;” setting, along with setting “top: 10px;” or something like that. So you might have something like this in your Stylesheet section:

.fixedimg {
	display: block;
	height: 26px;  /* This will be added to the height of the gap before the first text. */
.fixedimg img {
	position: fixed;
	top: 10px;  /* This is the amount of space between the top of the window and the top of the image. */

And if you want it centered horizontally, the you could add “left: calc(50vw - ##px);” within “.fixedimg img” as well, where “##” is half the number of pixels wide that the image is.

Then, at the top of your passage, you’d do something like:

<span class="fixedimg">[img[example.png]]</span>

And that should do it.

Enjoy! :grinning:


HiEv thank you so much for helping me, and I am sorry if i disturbed it’s just that i’m french and i don’t speak english very well. Goodbye from France :wave:t3:


Bonjour! :slight_smile:

You didn’t disturb anyone. We were all beginners once.

1 Like