title: how to overlay a new div over entire body of HTML using Jquery?
body: <p>I am having similar issue as posted <a href="https://stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling">here.</a>. During Ajax request, I am trying to put background image of loading icon and greyed background, somehow the greyed background does not extend to the bottom of the page. As I scroll, it goes away.
  I tried remedies suggested in that post, but none helped.
  I thought of re-insering a brand new div that covers entire body of html and have background-greyed with loading icon. But I really don't know how to do that.
  So the question is using Jquery</p>
  
  <ol>
  <li><p>I have my HTML with body that contain various elements.</p></li>
  <li><p>Make the current contents invisible or greyed out, put a new div that covers entire the body of HTML (basically on top of the current HTML body) and fill it with greyed-background</p></li>
  </ol>
  
  <p>Any help?</p>