How can I set the image opacity for body background

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

it can be done like this

body::after {
  content: "";
  background: url(http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Check it here http://jsfiddle.net/dyaa/k4dw5hyq/2/

Edit: no need for opacity and filter in the body tag anymore http://jsfiddle.net/dyaa/k4dw5hyq/3/

Leave a Comment

tech