Menu
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)
}
319
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
There is no background-opacity property in CSS, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
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/
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
