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 ?

16 Nov 2019 at 07:43 PM

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.

28 Dec 2019 at 06:55 PM

Tim

Full screen Not Clickable overlapping layer / overlay - CSS

Different background color for Odd / Even table rows - CSS

CSS font-size units PX to PT, IN, EM, REM conversion

Smooth move of HTML elements - animation with CSS

Set CSS/HTML opacity - transparent background but not text

How to change Checkbox to Toggle slider button using CSS ?

Resize / shrink top navigation menu bar on Scroll in Javascript

CSS @Media min-width and max-width use together