user5508297 user5508297 - 1 year ago 61
CSS Question

How to override the opacity of document.body?

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:

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.

Answer Source

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

body {
   height: 100%;

  margin: 0;
  padding: 0;

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