Need help setting background images

Question

Hello,

I'm very new to Twine, this is actually my first time trying to make a game. Currently I'm on Twine 2 SugarCube 2, and I'm trying to create an interactive childrens book (3 or 4 books in 1) for my son. I have added images to passages using the following code in the passage...

<img src="images/image.png" />

What I'm having an issue with is trying to set a background for my "Home Screen" passage. When I try to add the image to the passage, the text spreads and makes the page larger than desired. I wanted to do a cover background and then change the color of the text to suite it. Is there a passage code that I can try? I've tried several CSS codes in the StorySheet but none of them have worked, or they have worked but for the entire story. Thank you!

Answer 1

The following demonstrates one way to use the CSS background-image property to display an image behind the content of the current passage. This CSS should placed within your project's Story Stylesheet area.

body {
	background-image: url("images/image.png");
	background-repeat: no-repeat;
	background-size: cover;
}

note: You can use a Passage Tag to control which image is shown by modifing the above CSS selector to include that tag.
eg. The following CSS rule will only be used for passages that have a forest passage tag assigned to them

body[data-tags~="forest"] {
	background-image: url("images/forest.png");
	background-repeat: no-repeat;
	background-size: cover;
}

 

Comments

greyelf,

Thank you for your response, it ended up working once I got everything lined up. I read through several of your comments on previous posts with a similar issue, but I could never get the Style Sheet to work for me. I think with all the different edits and commands I was trying I messed up my tags and once I realized that, it worked just fine. Thanks again.