I am trying to get a site to use full sized (full covered) background images using CSS3 such as this:

Code:
html {
     background: url(images/bg.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}

But I then want to change the background with a button on the site. I tried calling a JS function like the one below, but I lose the “full screen” background when I do so (it just aligns in the very middle). Is there some other style.backgroundsize or something that I have to assign in JS at the same time?


Code:
function changeBg(imgName) {
        newImage = "url(images/" + imgName + ".jpg)";
        document.getElementById('body').style.background = newImage;
}

Let me know if you have any ideas. I am trying to avoid using canned JQuery code if possible.