Background image not appearing in tagged passages

Twine Version: 2.3.14
Sugarcube2

I’d like to add a page texture/background to passages that I tag “note”. I am pulling an image from a site but made sure to grab the source image.
Here’s how I laid it out in my stylesheet:

}
tw-story[tags~="note"] {
 background-image:url("https://thegraphicsfairy.com/wp-content/uploads/2023/05/Distressed-Paper-Texture-GraphicsFairy.jpg");
 background-size:cover;
}

I feel like it’s staring me in the face, but I just can’t figure it out. If this looks right, could there be something else in my stylesheet conflicting with it?

TIA!

I just tested it in an empty project of mine and the passage tagged note does show up with the correct picture.
If there is an issue then, I’d guess that:

  • the passage is not properly tagged note (it’s case sensitive)
  • there is something in your stylesheet that affect the code (either an error in the code before the one you shared, or you have below a tw-story that override the code you provided)

Good to know the link is working at the least!

I don’t have any other tw-story code in my stylesheet and I’ve checked to make sure the passage and stylesheet are tagged as note.

I used to have a .note in my stylesheet when I had a different background color, but deleted that when I added the tw-story passage. Here’s the rest of the stylesheet:

tw-story[tags~="note"] {
 background-image:url("https://thegraphicsfairy.com/wp-content/uploads/2023/05/Distressed-Paper-Texture-GraphicsFairy.jpg");
 background-size:cover;
}
body {
  background-color: khaki;
  color: black;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
}
a { 
  color: cornflowerblue;
}

a:hover {
color: cornflowerblue;
font-style: italic;
border-bottom: 4px solid darkblue;
font-size: 110%;
}
#ui-bar {
color: darkgoldenrod;
}
#story {
margin-left: 3.5em;
}
.handwriting {
  font-family: 'Lucida handwriting', cursive;
  font-size: 25px;
}
.auri {
  color: indigo;
}
.thomas {
  color: indianred;
}
.other {
  color: darkmagenta;
}
.upsidedown {
	display: inline-block;
	transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
}
.title {
  font-size: 300%;
  background-color: black;
  color: darkred;
}
.newspaper {
  font-family: 'courier new', monospace;
  font-size: 20px;
}
p {
    text-indent: 2em;
}

Wait… Sorry, I just realised :joy:

You were using Harlowe code in SugarCube …

tw-story will only work in Harlowe. That element doesn’t exist in SugarCube.

body is what you what you want to target instead.

body[tags~="note"] {
 background-image:url("https://thegraphicsfairy.com/wp-content/uploads/2023/05/Distressed-Paper-Texture-GraphicsFairy.jpg");
 background-size:cover;
}

(this should be below the regular untagged body.

Ahhh that would explain it! I’ve added it in under the untagged body, unfortunately it’s still not appearing…

body {
  background-color: khaki;
  color: black;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
}
body[tags~="note"] {
 background-image:url("https://thegraphicsfairy.com/wp-content/uploads/2023/05/Distressed-Paper-Texture-GraphicsFairy.jpg");
 background-size:cover;
}
a { 
  color: cornflowerblue;
}
a:hover {
color: cornflowerblue;
font-style: italic;
border-bottom: 4px solid darkblue;
font-size: 110%;
}
#ui-bar {
color: darkgoldenrod;
}
#story {
margin-left: 3.5em;

try body[data-tags~="note"] ?
(the difference between the formats is sometimes minimal, and it gets confusing :joy: )

EDIT: btw, the relevant documentation about the data-tags

That’s the one! Thanks for helping me through it. Definitely bookmarking that documentation page for next time!