Change background image dynamically

Change background image dynamically

I'm new to jquery mobile and I have a need to change the background image dynamically. I tried the following codes but none is working. 
  1. //$('.ui-page').css('background-image', "url(img/background2.jpg) no-repeat center center fixed;");
  2. //$('#index .ui-page').css('background-image', "url(img/background2.jpg) no-repeat center center fixed;");
  3. $('body').css('background-image', "url(img/background2.jpg) no-repeat center center fixed;");
  4. //$('#rodeliox').css('background-image', "url(img/background2.jpg) no-repeat center center fixed;");
  5. //$('.ui-page').removeClass().addClass('.ui-page.bg2');

  7. //document.getElementById("rodeliox").style.backgroundImage = "url(img/background2.jpg) no-repeat center center fixed;";

  9. $('#index').trigger('pagecreate');
  10. alert("test");

This is the css that I used to set the background image. 

  1. #index.ui-page{
  2. background: url(img/background.jpg) no-repeat center center fixed; 
  3. -webkit-background-size: cover;
  4. -moz-background-size: cover;
  5. -o-background-size: cover;
  6. background-size: cover;
  7. background-size:100% 100%;
  8. }

Can anyone help me? Thank you so much!