Opacity is From 0.0 (fully transparent) to 1.0 (fully opaque). i.e 0.1,0.2...1.
Rather than making the `body` element partially transparent, Simply add extra div to hold the background, and change the opacity there, instead.
So you would add a div like:
<body class="my-container">
<div id="background"></div>
</body>
And move your body element's background CSS to it, as well as some additional positioning properties, like this:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.ytimg.com/vi/3KNQfA21QyQ/maxresdefault.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
working [FIDDLE][1]
[1]: http://jsfiddle.net/nbVg4/385/
I think the simplest solution, rather than making the `body` element partially transparent, would be to add an extra `div` to hold the background, and change the opacity there, instead.
So you would add a `div` like:
<div id="background"></div>
And move your `body` element's background CSS to it, as well as some additional positioning properties, like this:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
Here's an example: http://jsfiddle.net/nbVg4/4/