Background image position is getting change when jquery dialog size is getting increase
<p>the div which i am showing through jquery dialog that has style sheet.</p>

<p>here is my code</p>

<pre><code> &lt;style type="text/css"&gt;
 .BusyStyles
 {
        background-image: url('../images/busyicon.gif');
        background-repeat: no-repeat; background-position: center center; 
        height: 150px;
        width: 250px;
}
 &lt;/style&gt;
</code></pre>

<p>i have one div like</p>

<pre><code>&lt;div id="dialog" &gt;
&lt;/div&gt;
</code></pre>

<p>now this way i am showing dialog</p>

<pre><code> $("#dialog").dialog({
             autoOpen: false,
             height: 80,
             width: 180,
             modal: false,
             draggable: false,
             resizable: false,
             position: 'center',
             show: {
                 effect: "fade",
                 duration: 2000
             },
             hide: {
                 effect: "fade",
                 duration: 500
             }
         });

$("#btnOpen").click(function () {
             $('#dialog').removeClass('ui-dialog-content ui-widget-content').addClass('BusyStyles').html('');
             $("#dialog").dialog("open");

             var content = "&lt;div id='content_dv'&gt;";
             content += "&lt;table border='1' style='height:auto;width:auto;'&gt;";
             content += "&lt;tr&gt;";
             content += "&lt;td&gt;";
             content += "This is row 1";
             content += "&lt;/td&gt;";
             content += "&lt;/tr&gt;";
             content += "&lt;tr&gt;";
             content += "&lt;td&gt;";
             content += "This is row 2";
             content += "&lt;/td&gt;";
             content += "&lt;/tr&gt;";
             content += "&lt;tr&gt;";
             content += "&lt;td&gt;";
             content += "This is row 3";
             content += "&lt;/td&gt;";
             content += "&lt;/tr&gt;";
             content += "&lt;/table&gt;";
             content += "&lt;/div&gt;";

             $content = $(content);
             $content.css({ 'display': 'none' }).appendTo('div#dialog');
             $.doTimeout(3000, function () {
                 // here wait for 10 sec just to simulate delay for fetching data from server side

                 $("#dialog").animate({ height: $content.outerHeight(), width: $content.outerWidth() }, 1000,
                 function () {
                     $("#dialog").removeClass("BusyStyles");
                     $content.fadeIn('slow'); 
                 });
             });
             return false;
         });
</code></pre>

<p>when dialog open then a busy icon is showing. i use <strong>doTimeout</strong> a timer just to simulate some delay and when delay end then i remove the class BusyStyles so busy icon goes and just show my content. everything is working fine but one problem is there. when i am increasing size of the div then the busy icon which was showing at center it is getting coming towards left....which is problem. when increasing size busy is not showing at center but i want that busy icon should always show at center when i am increasing dialog height &amp; width. so please give me easy solution by which i can solve this problem. busy icon need to be sticked at center of dialog when size will be change.</p>

<p>please help....thanks.</p>
