Trying to get background image on a passage

dpayton

Twine 2.1.0, Harlowe 2.0

I want to use an image for the background for a single passage. I'm trying this:

(background: "example.jpg")?Page

But I get this error:

The (background:) command should be assigned to a variable or attached to a hook.►
?Page

Figured "?Page" was OK for the "background:" macro. The Harlowe documentation suggests this is possible.
"?Page selects the page element (to be precise, the <tw-story> element) and using it with the (background:) macro lets you change the background of the entire page."

Unless perhaps this doesn't work for images.

I tried (enchant:) using an image name,

(enchant: ?page, (background: "example.jpg"))

but it just fails silently; no error message. Now, I understand that a missing image fails (silently) but an "<img" tag works just fine with the same image.

Any help appreciated.

Deadshot

the background macro only uses colours. also, it doesn't fill the entire background of the passage - just the back of the writing. don't use macros for this kinda stuff. use CSS.

step 1: in the passage you want the image in, add a tag by pressing the button just under the passage title. call it whatever you want. i'll call it 'image' for example. then, at the top of the same passage, paste this code:

{(print: "<script>$('html').removeClass(\)</script>")(if: (passage:)'s tags's length > 0)[(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")]}

step 2: exit the passage. press the name of the story in the bottom right, then press 'edit story stylesheet. at this code:

html.image {
background-image:
}

You can see after the html i put the tag name.

step 3: if your image is online, then just find it, and click on view image. copy the URL at the top in the search bar, and put it in this:

url('your URL')

then put that in the CSS:

html.image {
background-image: url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg');
}

However, if your image is not online, but in a file on your computer, then go to this website:

https://www.base64-image.de/

press copy CSS once its been converted and put it into the CSS.

step 4: in the next passage, paste this code again:

{(print: "<script>$('html').removeClass(\)</script>")(if: (passage:)'s tags's length > 0)[(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")]}

this will return the passage background to the default white.

i hope this helps