Adding a background image centered on the passage

Authoring Twine
1

Twine Version: 2.8.1

Hi All,

I know how to add a background image to the body element of an html page using e.g.:

body {
    background-image: url('<image url>');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: auto 100vh;
}

(I want the image to be centered and vertically fill the screen.)

It displays fine in Twine, but the image is centered to the whole page. I want it to be centered on the passage (so if the player opens/closes the sidebar, the image shifts along with the text). How can I achieve this effect?

Feedback is very much appreciated!

2

The HTML section of the documentation shows what elements (and their identifiers) make up SugarCube’s default User Interface.

Reviewing that document reveals that the “passage” area of the page is represented by a <div> element that is assigned a passage CSS class.

Combine that information with a little knowledge about CSS Selectors produces a CSS Rule like the following…

.passage {
    /* your background image property assignments */
}

However, there are some default behaviours that you may need to overcome:

  1. The height of “passage” area is automatically calculated to be the minimum required to fit the content generated from the processing of the visited Passage.
  2. the height of “story” area (a) is also automatically calculated to be the minimum required to fit the content of “passage” area plus a small top & bottom margin.
  3. the same automatically calculated height situation is true for the <body> & <html> elements that wrap “story” area.

(a) which is represented by the <div> element that has an id of story, that wraps the passage classed <div> element.

2 Likes