title: how to float a throbber/progress bar over greyed-out form using jquery css?
body: <p>I am trying to create a throbber that sits above a form when the form is submitting data to the server. So far my method of using jquery's css function works successfully for making the form appear greyed-out but I cant superimpose a throbber/progress wheel image over the top..is this the way to go or is there something Im doing wrong?</p>
  
  <p>Here is my sample code in a .js external file..</p>
  
  <pre><code>(function($) { 
  
  Drupal.behaviors.progress = {
  attach: function(context, settings) {
  
   $(".form-submit").click(function()
    {
      $("#tripbuilder-form").css({'background-color':'white',
                      'opacity': '0.5'
                      });
      $("body").css({
                      'background-image': 'url(ajax-loader.gif)',
                      'background-position': 'center',
                      'z-index': '100'
                      });
  
  
  
    });
    }
  };
  
  
  })(jQuery);
  </code></pre>
  
  <p>Ive experimented with </p>
  
  <ul>
  <li><p>putting quotes around the url of the image (double and single quotes)</p></li>
  <li><p>ive also tried putting the background-image statements in the section related to the form instead of the body </p></li>
  </ul>
  
  <p>..but all with no luck. Im thinking its the fact its a background property and so the image is effectively being hidden - in that case what is the preferred method of achieving the effect of having a progress bar image float above a greyed out form during processing? Any help much appreciated.. </p>