DIV and CSS: Floating box inside semi transparent div - html

Question

I am creating this in a visualforce page but due to stackexchange policy I need to post web development questions here.
I have the following HTML code:
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<h>Transferring Records...</h><br />
<img src="/img/loading32.gif"/><br />
<h>This may take a minute or two...</h><br />
</div >
Which generates a full screen gray overlay and then my text and image in the center.
What I am trying to do is create a smaller white box around my text as well so it is easier to read. Can anyone help me with that?
Here is a screenshot of current setup:

Answer 1

Personally I would change your structure a slight bit and decouple your CSS - if only for your own sanity when reading the thing in between content (if you want to you can simple include it in a <style type="text/css"></style> tag and it would work as well.
Since you want your white box to be inside your container, why not structure it like that? By fixing the outer container (with class overlay, referenced as .overlay in CSS) you can now position the inner box correctly, by moving it 50% from the left and top and then transform the box itself using translate, moving it by minus half its width and height. Now your structure makes sense and you can do whatever you want with your inner box:
div.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: gray;
background-color: rgba(150,150,150,.5);
}
div.overlay div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: black;
font-weight: bold;
text-align: center;
padding: 20px;
background: rgba(255,255,255,.5)
}
<div class="overlay">
<div>
<h>Transferring Records...</h>
<br /><img src="/img/loading32.gif"/>
<br /><h>This may take a minute or two...</h>
</div>
</div>
This structure also makes it easy to work with as everything is simply contained in one single element, and you control everything in it. Easier to debug, easier to reason about (the relationship of the elements is obvious) and your CSS can target specifically divs that are nested inside boxes with the class overlay.

Answer 2

Are you searching for something like this?
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;"></div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<div style="background-color: rgba(255, 255, 255, 0.3);padding: 20px;">
<h>Transferring Records...</h><br>
<img src="/img/loading32.gif"><br>
<h>This may take a minute or two...</h>
</div>
</div>

Answer 3

To add a white background to your div, use background: white;. The problem you then have is your text is also white, so you have to change the color to color: black (or some other color).
Knowing SalesForce, your probably would want rounded corners, so add border-radius: 10px; for that :)
To round the corners more, increase the 10px to a higher number, say 20px, and to round them less, decrease the number to say 5px
As snippet below
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:black; font-weight:bold; text-align: center; background: white; border-radius: 10px;">
<h>Transferring Records...</h>
<br />
<img src="/img/loading32.gif" />
<br />
<h>This may take a minute or two...</h>
<br />
</div>