How do I combine the use of an image as a background with a white box as background to text?

Question

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

Answer 1

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.