+1 vote
by (130 points)

Hi all,

I am very new Twine 2 and would like to use a background image, however, the text becomes difficult to read. Therefore I would like to display the text with a box on a white background. Here is sample of the look I am after.

So far, all I can get is the background image to display with the following code:

tw-story {
 background-image:url("https://www.humes.co.nz/assets/Uploads/cc2aef3a6e/About-Us-Module-Two-Image-v3.jpg");
background-size:cover;
color: black;
font-family: Futura,Impact,Helvetica,sans-serif;
font-size: 125%;
}

 What else do I need to add so the text displays inside a white box? Please help!

thx

1 Answer

0 votes
by (8.5k points)

Add a background to tw-passage

tw-passage {
    background-color: rgba(255, 255, 255, 0.75);
    border: 2px solid white;
    padding: 5px;
    min-height: 80vh;
}

Border and passing are optional, but help with making sure the text doesn't end up right at the edge of the box. The min-height setting makes the box look a bit larger even on passages with little content.

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.
...