How can I set the image opacity for body background

Question

How can I set the image opacity for the image in the background of the body tag

my html:

<body background="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
</body>

my css:

body{
    opacity: 0.1,
    filter:alpha(opacity=10)
}

Background images cannot have an opacity value other than 1. You would have to use a positioned full size div with **that** having a background image and use opacity on that div. — Paulie_D, Mar 19 '15 at 14:54
possible duplicate of [CSS: set background image with opacity?](http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity) — Paulie_D, Mar 19 '15 at 14:55
I've commented out the JSFiddle link from your question. You were told to post code when you put that JSFIddle link in, and wrapping one word in code tags doesn't count as posting the accompanying code. Please edit your question appropriately otherwise this question will be completely useless if and when JSFiddle is offline. — James Donnelly, Mar 19 '15 at 14:58

dyaa · Accepted Answer · 2015-03-19T15:03:45.810

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/

How can I set the image opacity for body background

1 Answers1