title: How to delay the display of the background image in a div
body: <p>Here's my <a href="http://jsfiddle.net/2wx9rt7t/3/">fiddle.</a></p>
  
  <p><br>I just want the " <code>background-image:</code> " in the css to load fully and display after 3 seconds with a quick fade in effect, until then the entire div must be in black color.
  <br>How it is possible in <code>css</code> or <code>javascript</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.initials {
      position:absolute;
      background:black;
      background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
      color:white;
      margin-top:20px;
      padding-top:20px;
      padding-bottom:20px;
      width:60px;
      text-align:center;
      margin-left:20px;
      font-size:17px;
      letter-spacing:5px;
      box-shadow:0px 2px 3px rgba(0,0,0,.15);
      overflow: hidden;
      white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="initials"&gt;A&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>