How to delay the display of the background image in a div

Question

Here's my fiddle.

I just want the " background-image: " 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.
How it is possible in css or javascript.

.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;  }

<div class="initials">A</div>

Answer 1

With some minor changes, I might have achieved what you want with only CSS3. Check the fiddle: http://jsfiddle.net/w11r4o3u/

CSS:

.initials {     position:relative;     background:black;     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; } .initials .text {     position: relative; }  @-webkit-keyframes test {   0% {     opacity: 0;   }   100% {     opacity: 1   } }  .initials:before{   content: "";   background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   -webkit-animation-name: test;   -webkit-animation-duration: 3s;   -webkit-animation-fill-mode: forwards;   -webkit-animation-timing-function: ease-out;   } 

HTML:

<div class="initials"><div class="text">A</div></div> 

Edited:

Now the animation starts after 3 seconds and takes .3s to complete. Here is the fiddle: http://jsfiddle.net/w11r4o3u/1/

• To adjust the "velocity" that fadeIn occurs, edit -webkit-animation-duration: .3s;

• If you want to adjust the animation "delay" to start, edit -webkit-animation-delay: 3s;