HTML Background box over image (Sugarcube 2.34.1)

[Studio31]

Hey,

So this is probably a stupid question but I need to add a background to my pages that sits over the background image.

i.e. The image attached - I would like a black box with a transparency of 75% like in the image

How would I do this?

Thanks in advance!

 

[guest1492]

It's just CSS. There are multiple ways to do it. One way:

#passages {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 2em;
}

 

[_retorik_]

Just keep in mind that in SugarCube there are a few divs in the DOM that you must also set.

The hierarchy is like that: story > passages > passage-<name>

If you want to set the passage (div passage-<name>) to a certain opacity story and passage must be transparent or you will see what is below the passage ... probably a solid color.