[FIXED] How to override the opacity of document.body?

Issue

I want to make the body of my website have a low opacity but keep a popup at the default opacity of 1 so that it stands out.

How can I do this? I've tried specifying that the popup has opacity: 1 !important; but it doesn't take effect.

Here is a jsfiddle with my attempt: https://jsfiddle.net/80351/0xo10tjc/

Please note that I know how to achieve this by setting the opacity of an outer div instead of body at 0.2 but I really want to know if this is possible to do when changing body.

Solution

You can set html and body to have 100% height and apply background-color to a div

html, 
body {
   height: 100%;
}

body{
  margin: 0;
  padding: 0;
}

.overlay {
  background-color: yellow;
  opacity: 0.2;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/0xo10tjc/4/

Answered By - marcelo2605

Answer Checked By - Marilyn (PHPFixing Volunteer)