0 votes
by (410 points)
edited by

I put a background image on one of the passages, and... it didn't turn out quite right. This is the original image (just a test image, won't be in the final product) and here are a few examples of how it turned out when playing.

Here's my stylesheet code, though I'm not sure if that's the problem.

body {
  font-size: 130%

.titlepage {
  background-size: cover;
  font-size: 150%

#ui-bar {
  display: none;

#story {
  margin-left: 3.5em;

And here's what I have in the passage.

<img src="images/humanity.png" height=130 width=500 alt="HUMANITY"/>

I took the logo image out of the passage and experienced the same problem. How do I prevent this from happening?

1 Answer

0 votes
by (159k points)
selected by
Best answer

Please don't add information about the version of Twine or the Story Format you're using to the Question Title, it makes it unnecessary long without serving a real purpose.

You didn't state if you were assigning the .titlepage class in your CSS as a titlepage Passage Tag to your Passage or not, but based on the images you provided I will assume that you are. You also didn't explain what the

The second image shows that you have two copies of the background image overlaying each other, and this is a result of the fact that SugarCube 2 adds assigned Passage Tags to a number of different HTML elements of the generated page, which you can Inspect yourself using your web-browser's Web Development Tools.

If you look at the HTML of the generated page looks something like the following: (which I've simplified)

<html data-tags="titlepage">
  <body data-tags="titlepage" class="titlepage">
    <div id="story" role="main">
      <div id="passages">
        <div id="passage-start" data-passage="Start" data-tags="titlepage" class="passage titlepage">
          <img src="images/humanity.png" height="130" width="500" alt="HUMANITY">
          <a data-passage="START" class="link-broken" tabindex="0">START</a>
          <a data-passage="CREDITS" class="link-broken" tabindex="0">CREDITS</a>

... and as you can see titlepage appears in two class properties (as well as two of data-tags properties but that's not important in this case) which causes the background image to be added twice.

This is easily fixed by changing your .titlepage CSS selector to the following.

body.titlepage {
  background-image: url("https://media.playstation.com/is/image/SCEA/detroit-become-human-screen-17-ps4-us-13apr18?$native_nt$");
  background-size: cover;
  font-size: 150%