Help with adding background images

Authoring Twine
1

Really need some help in adding background images to passages from the pac. I tried adding this code -

body[data-tags~=“forest”] { background-image: url(Assets/Story/MainStreet.jpg); }

But nothing happens. Would really appreciate some help.
Thanking you in advance.

2

Hi there!

Before giving an answer could you answer these for me?

  • is your passage tagged forest?
  • are you using the Test or Play button in Twine when testing your project?
  • are the assets correctly named, capitalisation and all? (URLs are key-sensitive)
  • if you are exporting to HTML before opening the game, are the assets in the correct spot relative to the HTML file?

If you are working with local images on Twine, you will run into some difficulty while testing through Twine (because it creates a “temporary game file” when you press Test or Play). You will want to either:

  • host the image somewhere else during testing in Twine (like online)
  • export the game to HTML, place it correctly relative to your assets files, and open that file instead.
  • use this JavaScript technique to bypass this issue (unsure if it works on the Stylesheet tho)

(I think there were other threads about this here, lemme try to find them)

3

hello yes the passage was tagged forest.
For testing, I literally save the entire thing,
the game is already running on a FireFox browser. I only refresh the page that was supposed to show the background. The assets are all correctly named also.

If possible could you provide an example code,
something simple.

4

Do you mean exporting to HTML then open that HTML file?
Or do you mean, you’ve pressed the Play/Test button once then refreshed that game page when you edit things?

Edited from this guide:

Two ways of having assets (like a background picture)

  • Online assets, requiring an Online URL (html://website/file)
  • Local assets:
    • located in the user’s device, using the Absolute path URL (C:\User\Documents\Folder\file)
    • located in the project folder, using Relative path URL (Folder\file)

Note: as different players will organise their devices differently, the Absolute path is not recommended for Twine projects meant to be shared (online or otherside).

Online Assets

You will need the URL where the asset is hosted (the platform of your choice). It can look like something like this:

background-image: url('https://img.itch.zone/aW1nLzEyNTc4OTAzLnBuZw==/original/vPjgZG.png');

(the header in the guide page linked above)

Note: if the project is played offline, those assets will not load.

Relative Path

For assets located in the game folder, you will need their Relative paths. This is a path the operating system will take to find the wanted asset, starting from the file (or program) where the code is triggered. For Twine projects, that starting point is the project HTML file.
Assuming that the game folder is as follow:

    index.html
    images\
        introduction\
            cool.jpg

The image cool.jpg is located in the folder introduction which is located in the folder images. As such from the HTML file, the relative URL for that image would be:
In turn the url for that image would be in the Stylesheet:

    background-image: url('images/introduction/cool.jpg');

There is not more to it.