Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Image placement help
I've never used codes other than the really really standard stuff.
I'm using the stylesheet "The Earth's Story Illustrated" from This website. The problem is I can't figure out how to add a photo into the box at the top.
It says this is how to add one:
This stylesheet is capable of displaying a 480-pixels-tall scene image above every passage's text! You can set scene images using Tag CSS. To assign, say, the image "classroom_afternoon" to the tag "classroom", simply create a stylesheet tagged "stylesheet classroom" and put this in it:
.passage .header {
background-image: [img[classroom]];
}
And then tag various passages with "classroom" to use the image.
To have multiple images overlaid on each other, add multiple img declarations separated by commas, in order from frontmost to rearmost:
.passage .header {
background-image: [img[character-funnycry]], [img[classroom]];
}
But I have no idea what any of this means. I watched a tutorial on how to add an image using html, but when I do it it places the image into the box where the text goes. I'm using twine online if that's worth mentioning.
Thankyou in advance!
I'm using the stylesheet "The Earth's Story Illustrated" from This website. The problem is I can't figure out how to add a photo into the box at the top.
It says this is how to add one:
This stylesheet is capable of displaying a 480-pixels-tall scene image above every passage's text! You can set scene images using Tag CSS. To assign, say, the image "classroom_afternoon" to the tag "classroom", simply create a stylesheet tagged "stylesheet classroom" and put this in it:
.passage .header {
background-image: [img[classroom]];
}
And then tag various passages with "classroom" to use the image.
To have multiple images overlaid on each other, add multiple img declarations separated by commas, in order from frontmost to rearmost:
.passage .header {
background-image: [img[character-funnycry]], [img[classroom]];
}
But I have no idea what any of this means. I watched a tutorial on how to add an image using html, but when I do it it places the image into the box where the text goes. I'm using twine online if that's worth mentioning.
Thankyou in advance!
Comments
Anyway, to make a background image you use this:
background-image: url('your URL');I don't really understand what you mean, so soz if this isn't what you meant.
The styles on the web-site you linked to were (mostly) design to be used with Twine 1's Sugarcane story format, they would need to be re-designed or modified to work with Twine 2's Harlowe or SugarCube (1.x and 2.x)
Ah, I'm using SugarCube.
Update: I figured out how to add an image into the box.
I copy and pasted .passage .header {
background-image: [img[my image]];
} into the stylesheet bit and it's added the same picture throughout all the panels.
The issue I'm having now is resizing the image to fill the box more, and being able to use a different image on each panel.
If it don't work, soz.
Some of the HTML elements that make up the SugarCube 1.x screen are different to that of Sugarcane, this means that the CSS selectors used to target those elements also need to be changed:
1. Change #sidebar to be #ui-bar instead.
2. Change every instance of internalLink to be link-internal instead.
3. Change every instance of externalLink to be link-external instead.
One way you can control which background image is being shown is to assign a custom passage tag to a set of passages, and then use CSS based on that custom tag to style those set of passages.
eg. Assuming I used a custom tag of desert the related CSS would look something like the following:
body.desert .passage .header { background-image: [img[my image]]; background-size: cover; }