Harlowe 3.1 background images?

Authoring Twine
1

Hey, I’m fairly new to Twine and I’m having difficulty applying background images to my story. I’m going into the stylesheet and typing in the following;

body[data-tags~="[Tag name]"] {
background-image: url([URL here]);
background-repeat: no-repeat;
background-size: cover;
}

I’ve made sure the proper page I’d like to apply it to is tagged correctly but I’m not sure if I’m missing something or if I’m using code for another format. I’m using Harlowe 3.1.0

1 Like
2

Please use the Preformatted text option in the toolbar when supplying code/CSS examples, it makes them easier to read and to copy-n-paste.

You can use your web-browser’s Web Developer Tools to Inspect the HTML elements that make up the current page when you’re viewing your Story HTML file. If you do this for a Passage that has been assigned a banana Passage Tag the HTML structure would look something like the following.

<body>
  <tw-story tags="banana">
    <tw-passage tags="banana">
      <tw-sidebar>
        <tw-icon tabindex="0" class="undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
        <tw-icon tabindex="0" class="redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
      </tw-sidebar>

      <!-- the contents of the current Passage would appear here... -->

    </tw-passage>
  </tw-story>
</body>

As you can see the banana Passage Tag was added as a tags attribute of the <tw-story> and <tw-passage> elements.

So there are two reasons why your body[data-tags~="[Tag name]"] CSS selector is not working:

  1. You are targeting the wrong element. eg, body instead of tw-story.
  2. You are targeting the wrong attribute. eg. data-tags instead of tags.

note: It is likely that the example you based your CSS selector on was meant for SugarCube and not Harlowe.

Changing your selector be like the following should solve your issue.

tw-story[tags~="TAG-NAME"] {
	background-image: url("IMAGE-URL");
	background-repeat: no-repeat;
	background-size: cover;
}
1 Like
3

Thank you for replying to me, unfortunately this doesn’t seem to have fixed any issue. I copied and pasted the code into my stylesheet and had no luck. Also a note that may be important; I’m using imgur as the hosting site for my images, if that matters at all.

4

What is an example of a URL that you’re using? If you aren’t using a direct link to the image, then it won’t work, so seeing a link you’re using might help if that’s the problem.

5

https://imgur.com/a/ETZuQG2 This is the specific test link I’m trying to use.

6

OK, that’s what I thought might be happening. That link doesn’t go to an image, it goes to an entire web page, which is why it can’t be loaded as an image.

You need to link directly to the image itself: https://i.imgur.com/uKUgUL5.jpg

That link should work.

1 Like
7

Just to save you future headache: imgur isn’t the best site to use for hosting images in this way. It’ll work for a few days, but then I think the direct link will time out and it’ll display an imgur ad instead.

We allow hotlinking on forums, but hotlinked images cannot be used as content for a website, including blog posts, avatars, site elements, and advertising. You can read our terms of service for more info. If you believe your site has been mistakenly blocked, please contact us for assistance.

source: https://help.imgur.com/hc/en-us/articles/201569776

1 Like
8

Ah, yes that fixed it! Thanks so much.

9

That’s certainly good to know, I’ll find another place. Thanks for the heads up

1 Like