CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 9720

How can I set the image opacity for body background

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

fiddle

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)
}

Upvotes: 8

Views: 39360

Answers (1)

dyaa
dyaa

Reputation: 1450

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/

Upvotes: 25

Related Questions