Background Images in Twine

Instead of a gradient background, you may want to use an image background instead. Using a single image in the background is a good way to set the context for the scenario without having to spend a lot of time working on images for each individual passage.

Currently, in your Style passage, you have something like this (the exact numbers for the gradient may vary, and it may say “bg” instead of “background”).

(enchant:?page,
	(text-colour:black)+
	(background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+
	(font:"Open Sans")
)

Change the background: or bg: property from a gradient to a link to the URL of an image, like this.

(enchant:?page,
	(text-colour:black)+
	(background:"https://www.christytuckerlearning.com/wp-content/uploads/2023/03/call_center.jpg")+
	(font:"Open Sans")
)

The result is something like this image.

Twine scenario with an image of an open office in the background.

Hide the sidebar

You can hide the sidebar to remove the undo and redo buttons and create a cleaner design. Use the hide macro to hide the sidebar.

(hide:?sidebar)

Image background without rounded corners

Another option is to avoid the rounded corners on the passage. One simple formatting option is to use a background image like this, but with square corners and no sidebar. If you do this, you need one extra line in the enchant: macro for the passage to add some css padding. Otherwise, the text is right at the edge of the passages and a little hard to read.

{(enchant:?page,
	(bg:"https://www.christytuckerlearning.com/wp-content/uploads/2023/03/call_center.jpg")
)
(enchant:?passage,
	(text-colour:black)+
	(bg:#fcfcfc)+
	(css:"padding:1.2em")
)
(enchant:?link,
	(text-color:navy)+
	(hover-style:(text-color:blue))
)
(hide:?sidebar)}
Twine scenario with an image background and square corners for the passage

Other background images

I have a few background images available that you can use for your scenario during this course.

For your final product, replace the URL with a link to your own image. You can use relative links to a local file rather than absolute URLs, but be sure to publish the image file(s) with your story file. (The difference between relative and abslolute links is explained more in the Images in Twine Passages topic.