How do you add a fairly transparent grey background behind all text in a story? (using Harlowe.2.1.0)

Question

My code currently:

tw-passage img { display: block; margin: 0 auto; }

tw-story {
    background-image:url("https://i.postimg.cc/Hs885fSh/LIQUID-GOLD-1024.gif");
      background-size: cover;
}
tw-sidebar {
display: none;
}

tw-story { font-family: monaco, monospace, helvetica, sans-serif; font-size:100%; color: white; background-color: white; }

tw-link, .enchantment-link {
    color: #A2A18D;
}

tw-link:hover, .enchantment-link:hover {
    color: #ccb25f;
}

.visited {
    color: #ccb25f;
}

.visited:hover {
    color: #ccb25f;

I've tried using several methods but haven't been able to figure it out. All I want is a box that goes around only text for each passage of my game so that it can be more readble with the background image I currently have. I'm very, very new to coding and would greatly appreciate any feedback in how to accomplish this!

Answer 1

Try adding this to your stylesheet.

tw-passage{
	text-indent: 2em;
	margin-top: 0;
	margin-bottom: 0;
	background-color: transparent;
	background-color: rgba(34, 34, 34, 0.6);
	padding: 10px;
}

 

Comments

To create a semi-transparent grey background the only part of this CSS example you actually need is the following..

tw-passage{
	background-color: rgba(34, 34, 34, 0.6);
}

... the rest of the CSS properties are just to make the text within the passage area look nicer.