How can I change background after clicking a linkreplace? (same passage)

Question

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.

Answer 1

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;
}

 

Comments

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.