title: CSS3 Preloader Code Not Showing Background Color
body: <p>I am using CSS3 Designed Preloader for my website.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#preloader
      {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
      }
  
  @-webkit-keyframes moveup
      {
        0%, 60%, 100%
            {
              -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
              -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
            }
      }
  @keyframes moveup
      {
          0%, 60%, 100%
              {
                  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
              }
          25%
              {
                  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
              }
      }
  @-webkit-keyframes movedown
      {
          0%, 60%, 100%
              {
                  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
              }
          25%
              {
                  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
              }
      }
  @keyframes movedown
      {
          0%, 60%, 100%
              {
                  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
              }
          25%
              {
                  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
              }
      }
  
  .layer
      {
          display: block;
          position: absolute;
          height: 3em;
          width: 3em;
          box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
          -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
      }
  .layer:nth-of-type(1)
      {
          background: #534a47;
          margin-top: 1.5em;
          -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
                animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
      }
  .layer:nth-of-type(1):before
      {
          content: '';
          position: absolute;
          width: 85%;
          height: 85%;
          background: #37332f;
      }
  .layer:nth-of-type(2)
      {
          background: #5a96bc;
          margin-top: 0.75em;
      }
  .layer:nth-of-type(3)
      {
          background: rgba(255, 255, 255, 0.6);
          -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
                animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--  THEME PRELOADER AREA --&gt;
      &lt;div id="preloader"&gt;
          &lt;i class='layer'&gt;&lt;/i&gt;
          &lt;i class='layer'&gt;&lt;/i&gt;
          &lt;i class='layer'&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="wrapper"&gt;
         Hi this is a demo content
      &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem I'm facing with this code is that the preloader is being visible on site load with the contents that are in HTML.</p>
  
  <p>i.e I want the preloader with background white so that whatever the HTML page is loading it's not visible. In the current scenario, the preloader is also visible and the background HTML page is also visible. I want to hide the background image page by giving the prealoder div a background colour so that it does not show anything behind.</p>
  
  <p>Can anyone help me out with this?</p>
  
  <p>I have the JS Code written to remove the preloader one the page is loaded. The only thing I am stuck at is that the visibility of the background contents while loading.</p>