Creating a translucent text box on top of an image?

Question

I have a gif as a background image, so merely changing the colour of text doesn't work very well. What I want to do is to create a rectangular text box with adjustable transparency, so that both the text and the image behind it can be seen clearly. Is this possible?

Answer 1

The details in your question are a little vague:
a. You don't state what element the image is the background of. (html, body, #story, #passages, .passage, etc...)
b. You don't state if the image is already sized to fit the default dimensions of the page or if it needs scaling.
c. You don't state how or where you want to display the "transparent text box" (whole passage are, part of it, etc..)

Place the following CSS example in your Story Stylesheet area, it makes the following assumption:
1. The image is the background of the html element and it is already sized to fit the default dimensions of the page.
2. The transparent text box is the whole of the passage area.

html {
	background-image: url("file://c:/hole/media/forest.jpg");
}
body {
	background-color: transparent;
}
.passage {
	background-color: rgba(34, 34, 34, 0.6);
}

... the above uses the CSS rgba() function to allocate a alpha (transparency / opaque) value to the specified colour.

Comments

Thanks for the reply! Here are the answers to your questions:

a. body (I think - see the code below please)

b. Yes, the image has already been resized to fit the screen.

c. I want the text box to cover the whole passage, but it should not extend beyond the text, i.e. it should be as small a text box as possible that just manages to encompass the text, and not go beyond.

Using the rgba function you mentioned I modified the values to produce this:

body.mainmenu {
  background-image: url("https://media.giphy.com/media/3oFzmqxrhGb5wCNfK8/giphy.gif");
  background-position: center center;
  background-attachment: fixed; 
  background-repeat: no-repeat;
  background-size: cover;
}

.passage {
	background-color: rgba(255,255,255, 0.3);
}

This is very close to what I want, but right now my third point isn't met - the text box covers space that doesn't have text. Is it possible to limit the text box's size somehow?

EDIT: I figured it out (using width and height). Thanks so much!