Image not filling background

Twine Version: 2.3.12
Story Format: Harlowe 3.2.1

Hi all. I’m new to all of this so be gentle. I’m playing around with setting background images and I have figured out how to do that when I place 1 image across the entire story.

tw-story {
  background-image:url("images/cyberpunk.png");
   background-size:cover;
}

The image will display across the entire screen. It works beautifully. The problem is when I start trying to apply backgrounds based on tags.

tw-story [tags~="Cyber"] {
  background-image:url("images/cyberpunk.png");
   background-size:cover;
}

Then the image only appears behind the text. I’ve tried plugging in lorem ipsum just to see what happens when I have a block of text and it only applies the background image behind the text.


Anyone know what I might be doing wrong?

If you use your web-browser’s Web Developer Tools to Inspect the HTML elements that make up area Harlowe uses to display the story you will see it looks something like the following when a forest Passage tag has been assigned to the ‘current’ Passage being shown…

<tw-story tags="forest">
	<tw-passage tags="forest">
		<tw-sidebar>...HTML elements of left sidebar area...</tw-sidebar>
		...HTML elements and textual content of 'current' Passage...
	</tw-passage>
</tw-story>

…and you will notice that that forest tag has been assigned to both the <tw-story> element as well as the <tw-passage> element. And if you view the default CSS associated with the <tw-story> element you will see that it resizes itself to cover the entirety of the web-browser’s view-port, where as the default CSS associated with the <tw-passage> element causes it to only be the minimum height required to display the content of the ‘current’ Passage.

The structure of your tagged CSS selector includes a space character between the tw-story element and the [tags~="Cyber"] tags base filter. This instructs the web-browser to apply that CSS to any descendent element that has that specific filter, which in this case is the <tw-passage> element, and that default CSS of that elements is setup so that its height is the minimum needed to display the visual contents of the ‘current’ Passage.

If you remove that space character then that CSS will be applied to only the <tw-story> element, whose dimension default to the entire area of the web-browser’s view-port.

tw-story[tags~="Cyber"] {
   background-image: url("images/cyberpunk.png");
   background-size: cover;
}
1 Like

You are the BEST!
Thank you!