Looking for better way to set resizeable background Css3 / HTML / mootools

I found some code that allows me to resize browser window and reset image h+w appropriately like so

    html {
        background: url(css/im开发者_StackOverflow社区ages/600.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

I'm not clear how to change the background of this element as the following line fails to find the html element

window.addEvent('domready', function () {
    $(this).setStyle('background', 'url(css/images/600.jpg) no-repeat center center fixed;');
});

How can I change the background image of the html tag through mootools script? Would it be better to set a class to the html element , if so how do I reference the element by Class?

inside the domready function, this is the window element not the html element

should be something like this:

window.addEvent('domready', function () {
    this.document.html.setStyle('background', 'url(css/images/600.jpg) no-repeat center center fixed');
});

Hope this helps

BTW: i wouldn't give a style to the html element, it causes problems on IE. It's better to style the body tag or create a wrapper div