0 votes
by (590 points)

This is how usually my background looks on my story stylesheet.

body {
	background-image: url("bckgrnd.png");
	background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
	width: 100vw;
	height: 100vh;

Please help.

1 Answer

0 votes
by (158k points)

You don't state how long you want the background to last:

1. Only until the next Passage Transition.

You can use the <<addclass>> macro to add a CSS classname to the body element, and then use a CSS selector that targets that classname to change the current background. The classname will be automatically removed from the body element upon then next Passage Transition. The following assigns the forest classname.

<<linkreplace "Click Me">><<addclass "body" "forest">><</linkreplace>>

You would use a CSS selector like the following within your project's Story Stylesheet area.

body.forest {
	/* place the CSS properties you want to change here. */
	background-image: none;

2. For this and all following Passages.

In this case you would assign the CSS classname to the html element like so.

<<linkreplace "Click Me">><<addclass "html" "forest">><</linkreplace>>

... and use a CSS selector like the following.

html.forest body {
	/* place the CSS properties you want to change here. */
	background-image: none;


by (590 points)
What I need it is to stay a few passages like that, and then, when the main character goes back to the main zone, the normal background changes to its usual self (to the background that is tagged in that passage). Thank you for your answer.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.