How to change the “background-image” css attribute with JavaScript?

[M]

I'm trying to get two divs background-image css attibute to change every X seconds. Here is my code:HTML\[code\]<div id="bg_left"></div><div id="bg_right"></div>\[/code\]CSS body{ height:100%; }\[code\]#bg_left{ height:100%; width:50%; left:0; position:fixed; background-position:left;}#bg_right{ height:100%; width:50%; right:0; position:fixed; background-image:url(http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png); background-position:right;} \[/code\]JAVA SCRIPT\[code\] function carousel_bg(id) { var bgimgs = [ 'pp_hey_you_bg.png', 'burningman_bg.png' ]; var img1 = bgimgs[id]; var img2 = bgimgs[id+1]; var cnt = 2; $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")"); $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")"); id = id + 1; if (id==cnt) id = 0; setTimeout("carousel_bg("+id+")", 10000); } $(document).ready(function() { carousel_bg(0); });\[/code\]? You can see the same at: http://jsfiddle.net/vinicius5581/B9aQg/4/What am I doing wrong and how do I get it to work? My idea is to get to a point where the background-images will be changing randomly but get them to change would be a good start.