Text With Background Images

I recently decided to add background images to my game, but adding text has proven difficult as the text is usually hard to read due to the variety of colors in any given background image. I’ve experimented by changing the text color, but any color that contrasts enough with the background to be actually legible was just tacky and awful. I was wondering if there was a way to either add a solid, color-filled box or border behind the text itself so as to make it more clear or perhaps a way to lower the opacity of the background image.

Any other workarounds for this issue are welcome, of course. Thanks in advance!

Twine Version: 2.3.5
Story Format: Harlowe 3.1.0

1 Like

Hi Monkeybrains, I’ve just started using Twine and Harlowe myself and this is an answer I’ve been looking for as well. I’m starting to wonder whether it would work by creating a text box with the text in it in something like Word and saving it as an image, then using that image. That way you can do more things with your text and have it in a black text box with a fancy border. Of course, that may throw up a whole bunch of different problems, and I’ve not tried it myself yet. The other thing I was thinking of was creating a background picture that was 50% (or maybe more) transparent, so the text is more easily seen.

If you’ve discovered any other solutions, I’d love to hear them!

2 Likes

You can actually change the background colour of the text-box, by targetting in the StyleSheet the tw-story element:

tw-story { background-color: color}

See also:
https://twinery.org/cookbook/css/storyformats/harlowe.html#overwriting-harlowe-css
or

https://twinery.org/cookbook/cssselectors/harlowe/harlowe_cssselectors.html

Both will give you a list of elements you can target with CSS.

2 Likes

It would be tw-passage rather than tw-story, right?

2 Likes

Both work, though they have different size.

[Harlowe wizard, please correct me if im wrong:] iirc story stays the same during transition to a new passage, but passage updates (or “refresh”) every time.

2 Likes

Examples from linked article:

Plain

Font-weight shift
zy9hy

Transparent dark text box around text
AqpCA

Drop shadow

Lighter text box with drop shadow

Text with black outline
s7bV6

2 Likes