full screen background images that change

[BluegillMedia]

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

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?

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.

[cbVision]

Try:

 document.getElementById('body').style.backgroundImage = newImage;

[BluegillMedia]

that worked. Thanks.

[cbVision]

Excellent! Just as clarification. When used alone, "background" supports multiple properties. For example, in this "background: url(images/bg.jpg) no-repeat center center fixed;" you're declaring the image, the repetition, and positioning. When you tried to use background again to simply change the image, you weren't declaring the positioning or repetition, so it was being overridden with nothing.