Harlowe passage styling for background image?

Authoring Twine
1

Twine Version: 2.3.5
Story Format: Harlowe 1.2.4

For my story I’m using tag based passage styling and everything is working fine except for displaying the image with the measurements I want. I want the background image to display in the entire passage area, let’s say 1100px 630px.

html.test tw-passage {
background-image:url("./images/test.jpg");
width:1100px;
height:630px;
background-size:contain;
background-repeat:no-repeat;}

The problem is that the passage area is “static” and I can’t figure out how to make it display the entire image. I assume the solution has to do with a tw-passage element but I haven’t been able to figure out how to set a size that works, or if I should define it in tw-story.

tw-story {
margin-left:18%;
margin-bottom:5%;
overflow:hidden;}

tw-passage {
font-size:22px;
margin-bottom: 5em;
width:1100px;
height:630px;}

This is quite a simple issue but there are so many threads about background images that it’s difficult to find a solution for this specific problem.

1 Like
2

Please use the toolbar’s Preformatted Text option when supplying code examples, it makes them easier to read and to cut-n-paste.

I noticed that you are using the 1.x series of Harlowe, which along with the 2.x series is only included with the Twine 2.x application so that older projects can still be Tested or Played within the application. You should be using the 3.x series of Harlowe for new projects.

Based on the CSS selector of your 1st example it appears that you’re trying to use a test Passage Tag to conditionally apply that CSS rule. The 1.x series of Harlowe doesn’t include built-in support for using doing that, however the 3.x series does. But the tag is applied to the <tw-story> element instead.
eg. if you assign a test Passage tag to a Passage then the associated <tw-story> element would look something like…

<tw-story tags="test">...

…and you would use a CSS selector like the following to target it…

tw-story[tags~="test"] {
	...
}

So if you changed to using Harlowe 3.x then your 1st example would look something like…

tw-story[tags~="test"] tw-passage {
	background-image: url("./images/test.jpg");
	width: 1100px;
	height: 630px;
	background-size: contain;
	background-repeat: no-repeat;
}

I want the background image to display in the entire passage area

If by this you mean you want the image to cover the entirety of page’s visible area (aka it’s viewport) then you need to target the <tw-story> element itself…

tw-story[tags~="test"] {
	background-image: url("./images/test.jpg");
	width: 1100px;
	height: 630px;
	background-size: contain;
	background-repeat: no-repeat;
}
1 Like