Trying to replace a CSS rule dependant on the current winow size.

Trying to replace a CSS rule dependant on the current winow size.

I've been trying to create a script that loads an appropriately sized background image dependant on the window size. I am able to confirm the screen resize is being registered but the CSS doesn't seem to be updating, at least the image is not being replaced !
Can any one see where I am going wrong ?

css
  1. #bg { background:url(img/backgrounds/1920.jpg) no-repeat center center fixed; /* default image to load */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
Jquery
  1.  $(window).load(function() {  
          //the default on load vars required 
        var theWindow = $(window); 
        var $bg = $('#bg'); 
        var aspectRatio = $bg.width() / $bg.height();  
        var iWidth = 1920; //default loaded size... really should make this small for mobile first ? 
          
        function resizeBg() { 
                theWindow = $(window); 
               var wWidth = theWindow.width(); 
                $("div#debug").text("Window Width: " +  wWidth + "\n"); 
                // one for each size image we have 
                if (theWindow.width() <= 759) {/**/  
         
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/759.jpg") no-repeat center center fixed;")');             
                  iWidth = 759;}  
                else if (theWindow.width() <= 959) { 
                
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/959.jpg") no-repeat center center fixed;")'); 
                  iWidth = 959;}  
                else if (theWindow.width() <= 1024) { /**/ 
                  
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1024.jpg") no-repeat center center fixed;")'); 
                  iWidth = 1024;} 
                else if (theWindow.width() <= 1280 ) { /**/   
                
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1280.jpg") no-repeat center center fixed;")'); 
                  iWidth = 1280;} 
                else if (theWindow.width() <= 1366 ) { /**/       
              
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1366.jpg") no-repeat center center fixed;")');  
                  iWidth = 1366;} 
                else if (theWindow.width() <= 1400) { /**/      
             
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1400.jpg") no-repeat center center fixed;")');  
                  iWidth = 1400;} 
                else if (theWindow.width() <= 1680) { /**/       
            
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1680.jpg") no-repeat center center fixed;")'); 
                  iWidth = 1680;} 
                else if (theWindow.width() <= 1920)  { /**/        

                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1920.jpg") no-repeat center center fixed;")');  
                  iWidth = 1920;} // the highest size  
                else { 
            
                  $bg.css('background', 'url(" <?php bloginfo ( "template_directory" );  ?> /img/backgrounds/1920.jpg") no-repeat center center fixed;")'); 
                  alert('No Conditions Met in resize scan');  
                  iWidth = 1920; /*debug*/} // emegency, no conditions met - get a background up :P 
              $( "div#debug" ).append("Image Size: " +  iWidth + "\n"); 
               
                 
                         
        } 
           
          $(window).resize(resizeBg); 
       
                                   
      $("#bg").click(function() { 
            var bgi = $(this).css('background-image'); 
            bgi = bgi.replace('url(','').replace(')',''); 
            alert(bgi); 
        }); 
         
           
                 

        }); 
                       
Any Ideas where I may be going wrong ?

Cheers
Jim