Image on a button click

Question

Hi Experts
i have a question which i did not understand .
This is the javascript function

function FreezeScreen(msg)
{
      scroll(0,0);
      var outerPane = document.getElementById('FreezePane');
      var innerPane = document.getElementById('InnerFreezePane');
      if (outerPane) outerPane.className = 'FreezePaneOn';
      if (innerPane) innerPane.innerHTML = msg;
   }

Here is the CSS

.FreezePaneOff
   {
      visibility: hidden;
      display: none;
      position: absolute;
      top: -100px;
      left: -100px;
   }

   .FreezePaneOn
   {
      position: absolute;
      top: 0px;
      left: 0px;
      visibility: visible;
      display: block;
      width: 100%;
      height: 100%;
      background-color:   #FCFCFC;
      z-index: 999;
      filter:alpha(opacity=45);
      -moz-opacity:0.45;
      padding-top: 20%;
   }

   .InnerFreezePane
   {
background-image: url('../Images/head of class.png' );
      text-align: center;
      width: 15%;
      background-color:  #9400D3;
      color: White;
      font-size: large;
      border:  solid 2px #FFFFFE;
      padding: 9px;
   }

  <div align="center" id="FreezePane" class="FreezePaneOff">
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
  
</div>
Here on the button click i want to display the image .The image is a gif type.It shows the dots in the form of a circle
.On the button click the background fades which works fine and but the image looks solid.I stil dont understand why....