CODEWITHSUNDEEP
css
user2565918
user2565918

Reputation: 11

How to do semi-transparent overlay

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.

Upvotes: 1

Views: 9019

Answers (2)

JAB
JAB

Reputation: 21089

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.

Upvotes: 2

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

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.

Upvotes: 5

Related Questions