Make an image appear on top of another image

Mnniska

Hi!
I am using Twine 2.01 local version and Harlowe

I'm working on a visual novel style game where the player has conversations with different people in various environments.
So far I've managed to include images using <img src=imagelink.png">

I'd like to have the backgrounds and characters be included seperately so that I won't have to make a version of every character with every variation of background behind them.

In short - I want multiple images to display over each other. They're all the same size and have an alpha to let the images be displayed. If I add multiple images with img src they all stack on top of eachother which is not what I want.

Is there a way to do this? Thank you!

greyelf

There are a couple of options using a combination of CSS and img elements:

note: you may wish to use Absolute positioning CSS to control exactly where the img elements place their related images.

1. You can use the solution found in the Basic Harlowe Passage Tag Based Styling thread to use tags to control which background images is being shown and then use img elements to place your characters on top of the background.

a. Replace the CSS in the linked thread with something like the folllowing:

html.desert {
	background-image: url('image-of-a-desert');
}

html.forest {
	background-image: url('image-of-a-forest');
}

b. Use standard img elements in your passage to show your characters:

<img src="image-of-characterA" />
<img src="image-of-characterB" />

2. Use the CSS z-index property to control which image appears in front of or behind the others.

The following is placed within a passage, it will display the forest image behind the character images.

<img style="z-index: -1;" src="image-of-a-forest'" />

<img style="z-index: 1; position: absolute; left: 50px; top: 50px;" src="image-of-characterA" />

<img style="z-index: 1; position: absolute; left: 200px; top: 50px;" src="image-of-characterB" />

note: You may want to move the style information in the above img elements into your Story Stylehsheet and assign id's or classes to the elements so that the styling can be applied to the correct img element.

Mnniska

Thank you so much, it works great!