Question

Hi Folks Here is what i got in css:

#loading {
 background:#000 url(loading.png) center;
 opacity:0.5;
 cursor:auto;
 min-height:250px;
 z-index:15;
}

#main {
 padding: 10px;
 z-index:1;
}

and in html:

<div id="loading">
      <div id="main">Something here</div>
</div>

and i expect the loading.png to cover the div#main but it doesn’t and “Something here” stays on the top of loading.png !?

Update: background is in CSS not an image in loading div.

Answer 1

Your HTML is wrong. The div main should be outside the div loading:

<div id="main">
  <div id="loading"></div>
  Something here
</div>

You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container’s width and height:

#main { position: relative; }

#loading {
 background: url("loading.png");
 opacity: 0.5;
 cursor:auto;
 width: 100%;
 height: 100%;
 z-index:15;

 /* Positioning */
 position: absolute;
 left: 0;
 top: 0;
}