How to dark the background?

Question 1

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.

Question 2

How about:

HTML:

<body>
    <div></div>
</body>

CSS:

body{
    background-image: url(../images/front/bg.jpg);
    background-position: center center;
    background-size:cover;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

body > div {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: #000;
    opacity:0.4;
}

You can put your content inside the body, in another div with top:0 left:0. Using opacity property, you can create a transition. Would this work?

Question 3

What they are doing on the site is swapping this image with this one

this can be acheived with jQuery with something like :

$('img').attr('src','newImg.jpg');

and possibly a css transition to slow the effect