How to edit the background of passages

Twine Version:Latest
Story Format: Sugarcube.36.1

So i want to change the background of the whole passage but i dont want it to be the same how do i do that. This is the code for every passage.How do make it so i can change it for each passage

body {
  background-image: url(path/to/image.jpg);
  background-size: cover;
  background-position: center center;
}

Will the background be different for every Passage shown?
Will groups of Passages have the same background?

FWIW, I worked out a macro with a variable which can select different backgrounds for a <div>. Unfortunately, though, a <div> ... </div> which encloses the entire contents of a passage still leaves its borders unchanged, showing the body’s background there.

I can post it if you’re interested.

Note that you can specify the background of a passage in its tag field. You can’t change it at runtime, though. In Twee notation:

:: Story Stylesheet [stylesheet]

.bkg-red { background: red; }

:: passageName [bkg-red]

This passage will have a red background.

I figured out how to do it if anyone is interested so basically how it works is background1 is the name of the tag which you will need to add to the passage where you want to add a different background.
You will need to make many of these if you want to have a different one for each passage.
For example you will need to change the background1 to background2 and add a new tag which is called background2 to the passage which you want to be changed.
: : body.background1 {
background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(your/picture/here.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
height: 100vh;
}
: :

1 Like

You will need to make many of these if you want to have a different one for each passage.

You might be familiar with this part of CSS already, but if you’re not, you should know that you can arrange things like the following. This way, you don’t need to worry about copying the common styles, and it will be much easier to tweak later.

body.background1 { 
background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(your/picture/here.jpg);
}

body.background2 { 
background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(your/picture/otherpicture.jpg);
}

body.background3 { 
background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(your/picture/thirdpicture.jpg);
}

body.backgroundCommon {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
height: 100vh;
}

Then tag each story passage that needs to be styled with backgroundCommon and the numbered tag, separated by a space.