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


Tags: javascript,jquery,html,css,fiddle

Problem :

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>



Solution :

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;


    CSS Howto..

    How to show a message box on center of screen?

    show a website loading image using only CSS (not Javascript or jQuery)

    How to include CSS for a specific part of the page

    How do I use CSS transformations to slide a div on screen?

    How can I add a border to the right side of this object?

    How to get the header and navbar on top?

    How to not inherit width in css?

    How do I center a div between two other divs?

    CSS Div with background image - how to allow for expansion of div on page?

    How to correct CSS formatting problem in Visual Studio

    How to position some text?

    How can I change the color of a DecoratorPanel in GWT?

    How does Apple position its slideshow inside a fixed-position box?

    CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

    How is possible to get 2d transformation css vertical way

    jQuery - How to aply custom CSS to fields which are not empty

    How can I select my font awesome icons in CSS?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How can I place two grid items above each other using Susy?

    How align div to a form field?

    Chrome showing target link after event has been prevented

    How to adjust website according to screen resolution

    how to use box-sizing:border-box on a fluid element with no height assigned?

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How do you replicate this box-shadow effect?

    How to correctly set background image in a HTML page using a JavaScript function

    css how to center this content

    css hover : aligning on bottom: how to align on top?

    CSS Sub Menu shows up outside body

    How do I create a CSS class Union?