Background image in Harlowe?

Hello! Everyone here is wonderful and has helped me a lot when I’ve bumped into little problems in the past. I have been reading and trying different code to get this to work but I cannot figure it out. I know this one gets asked a lot and read about three dozen different responses but none of the answers solved my problem.

I am trying to get a background (scrollwork) to show up on every passage of my interactive novel. I’m saving images locally and, yes, I’m using the right process for indexing, etc. I’ve been able to get normal images to show up, both in testing and in published file. But I can’t get the background image to display. The code I’m using is as follows (I’ve also tried it with tags as well as img src=… still no result):

tw-story {
	background-image: url("C:\Users\thest\OneDrive\Documents\Twine\Stories\Images\Background.png");
	background-repeat: no-repeat;
	background-size: cover;
}

I just took a look at my one game that has a background image, and what I have in my stylesheet is:

background-image: url("images/background.png");

So just the last part of the filepath, and a forward slash instead of a back slash. Maybe that will work?

Pretty sure that’s case sensitive. Also, you use relative directory name. That means you skip the directory names up to the current directory where the game resides. Not everyone has C: directory.

Ah, okay! I didn’t realize it was relative directory. Makes sense, of course. That solved it.

2 Likes