How to do semi-transparent overlay - css

Question

I am making my website on SquareSpace and I am beyond frustrated.
I like to have a background (which squarespace offers user to do without code) and like to have some sort of semi-transparent cover on the portion of the background where the text is. I think it's called overlay(?).
Squarespace allowed user to add CSS code. I have no idea what to do. I tried to google, youtube and etc. but I can't seem to find how to do this. Can someone help me? I would really appreciate it. I spent so much time trying to figure this out. What I am trying to do is something like this (http://blog.squarespace.com). There's background, and there's semi-transparent on the top that covers portion of the background.

Answer 1

Add a div, set it to position: fixed, have all of it's location values (top, bottom, left and right) at 0, and give it an rgba() background.
Note that this will make anything under it unclickable (unless you also give it pointer-events: none).
Here is a jsFiddle example of the concept.

Answer 2

Madara Uchiha's answer will cover the entire visible window, not just part of it. It won't work on certain mobile devices, either (iirc, Android WebKit doesn't support position: fixed).
A better suggestion would be to do something like the following...
HTML:
<div class="wrapper">
text
<div class="overlay"></div>
</div>
CSS:
.wrapper
{
position: relative;
display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}
.overlay
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
JSFiddle showing previous version, with which the text is affected by the overlay, and current version, with which the text is not (and usage of pointer-events: none is unnecessary): http://jsfiddle.net/LGq8f/1/
Of course, if you don't want as fine control over the overlay area that the inner div gives you, you could instead just use display: inline-block or float: left/float: right, plus the alpha-valued background color, on the text-wrapping div and skip the overlay div.