You can work with pseudo elements to the body, like this:
html, body
{
height: 100%;
}
body
{
background-image: url(http://www.placehold.it/1000x800);
background-size: cover;
background-attachment:scroll;
position: relative;
}
body.dark:after
{
position: absolute;
content: "";
left:0;
right:0;
top:0;
bottom:0;
background-color: rgba(0,0,0,0.3);
z-index:-1;
}
Here is a demo http://jsfiddle.net/NicoO/sv4yu/
Edit here is an version using CSS transitions: http://jsfiddle.net/NicoO/sv4yu/1/
body:after
{
transition-duration: 0.5s;
background-color: rgba(0,0,0,0);
position: absolute;
content: "";
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
}
body.dark:after
{
background-color:rgba(0,0,0,0.3);
}
You may also just put a transition on the opcacity of the pseudo element.