Having problems adding background images

Authoring Twine
1

I’m struggling with adding background images in Twine and would appreciate any help. I feel as if I am missing something obvious.

Right now the code in my Story Stylesheet looks like this:

body, tw-story {
  font-family: Georgia;
  font-size: 18px;
}

body[data-tags~="hallway"] {
	background-image: url("https://live.staticflickr.com/65535/49816856137_fbde20d27a_o.png")
	background-repeat: no-repeat;
	background-size: cover;
}

#menu-core {
	display: none;
}

#passages {
	max-width: 40em; 
}

The code comes from this thread.

In the passage where I want the image shown, I’ve added the tag “hallway”. It still doesn’t show when I publish to file and playtest it in my web browser. Do I need to add any code in the passage itself?

I’d really appreciate any help. I feel as if I’ve stared myself blind at this problem.

Twine Version: Twine 2
Story Format: Sugarcube 2.30.0

2

You’re missing a semicolon at the end of the “background-image” line. :stuck_out_tongue:

3

Haha! That’s embarrassing… however, I did go and amend that mistake but the image still doesn’t show. Is there any code I should add to the passage?

4

With the semicolon added, it works for me. It did take quite a while to load the first time before the background popped in…any chance that’s what you’re seeing?

5

That’s interesting. I removed the “[data-tags~=“hallway”]” and that made it work, but I want it to be specific to a certain passage. Is there code I’m missing to add to the passage in question then?

6

If you have assigned a hallway Passage Tag to the Passage then the data-tags based CSS selector based should work, assuming that the letter casing / spelling is correct and you haven’t added any white space to the start or end of that Passage Tag.

7

I’ve managed to fix it now. Thanks for all the advice. You guys are the best!