How to add a background image without using the style sheet

Authoring Twine
1

I’m making a store in my game and I want to display a background image within a div. The only way I know how to do this is by making a style class in the style sheet and using that, but since I’m only going to be using these images once I don’t want to clutter up the style sheet. So what I want to do is just change the background image of my div element in my passage without changing the style sheet. I’m using SugarCube 2.0.

2

You can use JavaScript to update the background-image property of an element, and one way to do that is to utilise the css() function of the jQuery library that comes included in SugarCube’s template.

You haven’t supplied an example of the code you’re using to create your <div> element within the Passage, or of how you’re naming/storing your images, so I’ve had to guess that it’s something like the following…

<div id="mydiv" style="background-image: url('media/forest.png');">
	content of my div
</div>

…you also haven’t explained what triggers the changing of the background, so for simplicity sake I’m going to use a <<link>> macro like the following…

<<link "Change Background">>
	<<run $('#mydiv').css("background-image", "url('media/desert.png')")>>
<</link>>

If you place both of the above code examples within the same Passage, and then select the “Change Background” link, you will see the value of the background-image property of the <div> changes from one value to the other.

2 Likes