Full screen Not Clickable overlapping layer / overlay - CSS

I need to use CSS fullscreen not-clickable overlapping layer, that should be lightly transparent. How can I create a simple CSS overlay with transparency ?

posted on 16.11.2019 at 19:43

zedd

Hi,

To create a full screen not-clickable overlapping layer with transparency, you can use this CSS code:

position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
z-index: -1;

You can also use this solution:

position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: -1;

If needed, you can modify the position of overlay by z-index value.

posted on 28.12.2019 at 18:55

Tim