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

Question

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>

Maybe you can use the [CSS3 transition](http://www.w3schools.com/css/css3_transitions.asp) otherwise you might considering javascript (jQuery) for this. — Perrykipkerrie, Dec 18 '15 at 07:37

Inacio Schweller · Accepted Answer · 2015-12-18T08:41:28.570

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;

mind that OP is asking for a quick fadeIn after 3 seconds, not a 3 seconds fade in, might need to edit your answer accordingly — valepu, Dec 18 '15 at 08:28
Already made the edit, now I also explained which properties control "velocity" and "delay" for the animation. — Inacio Schweller, Dec 18 '15 at 08:43
how do i load the image fully before displaying it, so that there is no image buffer after the fade-in effect ? — Zack, Dec 18 '15 at 09:40
The image is already loaded, even if it's not displayed because of opacity. Check in your **Chrome Dev Tools**, in the **Network** tab. — Inacio Schweller, Dec 18 '15 at 10:37

StudioTime · Answer 2 · 2015-12-18T08:13:39.820

5

Like this perhaps...the fade in is tricky though - AFAIK you can't fade the background-image property

setTimeout(function(){
    $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")');
}, 3000)

Another option is to split the HTML into 3 section, letters with highest z-index, then black layer over the stars layer...then fade out the black layer

edited Dec 18 '15 at 08:13

answered Dec 18 '15 at 07:57

StudioTime

22,603
38
120
207

Lucas Rodriguez · Answer 3 · 2015-12-18T08:37:51.537

3

Another option would be to have a separate class and assign that css to that class. Chech this fiddle

First you setup a method in document.ready:

$( document ).ready(function() {
       var changeClass = function() {
             $(".initials").addClass("with-image");
       }
       setTimeout(changeClass, 3000);
});

Then in your css you change initials to:

 .initials {
     position:absolute;
     background:black;
     background-COLOR: black; 
 ...

And add:

 .with-image {
       background-color:none !important;
       background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  }

edited Dec 18 '15 at 08:37

answered Dec 18 '15 at 08:00

Lucas Rodriguez

1,203
6
15

Thank you! Do you see it now? – Lucas Rodriguez Dec 18 '15 at 08:38
how do i make the image load fully before it is displayed? – Zack Dec 18 '15 at 09:13
my website contains a lot of images and this image loads along with all the others making it load halfway after the fade effect. – Zack Dec 18 '15 at 09:19
for the people having high speed connection it will will be smooth whereas for the people with moderate connection the gif image is loaded frame by frame.. – Zack Dec 18 '15 at 09:19
When you declare background-image in your stylesheet, the image will be downloaded straight away when the browser is parsing your stylesheet regardless of what you call that class in the document or you do not – Lucas Rodriguez Dec 18 '15 at 09:23

valepu · Answer 4 · 2015-12-18T09:31:07.520

You can create an absolute positioned div with the background image property and then use animate.css to add an animation without having to create the keyframes yourself

http://jsfiddle.net/n9wd4ver/5/

.initials {
  width: 100%;
  height: 100%;

}

.initials.initials-text {
  padding:20px 0px;
  position: relative;
  z-index: 2;
}

.initials.initials-background {
  position: absolute;
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
  z-index: 1;
}

.initials-container {
    height: 100%;
    margin-top:20px;
    margin-left:20px;
    position:relative;
    background:black;
    color:white;
    width:60px;
    text-align:center;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}

HTML:

<div class="initials-container">
    <div class="initials initials-background animated fadeIn"></div>
    <div class="initials initials-text">A</div>
</div>

EDIT: OP asked in a comment how to check if the image has been loaded. I'm assuming you don't want to use jQuery, so you can use a library called imagesLoaded (which works both with and without jQuery) and check for image being loaded this way:

http://jsfiddle.net/n9wd4ver/7/

CSS

.initials {
  width: 100%;
  height: 100%;

}

.initials.initials-text {
  padding:20px 0px;
  position: relative;
  z-index: 2;
}

#initials-background {
  position: absolute;
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
  z-index: 1;
  opacity: 0;
}

#initials-background.animated {
  opacity: 1;
}



.initials-container {
    margin-top:20px;
    margin-left:20px;
    height: 100%;
    position:relative;
    background:black;
    color:white;
    width:60px;
    text-align:center;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}

HTML

<div class="initials-container">
<div id="initials-background" class="initials fadeIn">

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

Javascript

imagesLoaded( '#initials-background', { background: true }, function() {
    console.log("image loaded");
  var d=document.getElementById("initials-background");
  d.className=d.className +" animated";
});

I have added at the end of my answer a way to check if an image has been loaded before starting the animation — valepu, Dec 18 '15 at 09:53

Arun Kumar M · Answer 5 · 2015-12-18T08:25:45.527

3

Here is the solution, background image will appear after few seconds.

Demo

Html

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

Css

.initials {
    position:absolute;
    background-color:#000;
    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;
}

Script

$(document).ready(function() {
setTimeout(function(){
    $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")');
}, 3000);
});

edited Dec 18 '15 at 08:25

answered Dec 18 '15 at 08:21

Arun Kumar M

1,633
1
15
26

The .fadeIn() applies to the DOM element you selected, not to the property you changed via .css(); The background-image is just changing instantly without proper fade. – Inacio Schweller Dec 18 '15 at 08:24
how do i make the image load fully before it is displayed ? – Zack Dec 18 '15 at 09:13

score 2 · Answer 6 · answered Dec 18 '15 at 07:55

2

JQuery

 $('.initials').css('background-image','url(http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif)');
 $('.initials').fadeIn(3000);

answered Dec 18 '15 at 07:55

arun

107
6

This fades it all in - not what the OP wanted – StudioTime Dec 18 '15 at 07:58

score 2 · Answer 7 · edited May 23 '17 at 12:15

You can try something like this:

Updated Fiddle

Note: You can test it by replacing url to and HD image url.

function loadImage() {
  var url = 'http://www.webgranth.com/wp-content/uploads/2013/04/Ceric6.gif';
  var img = $("<img />").attr('src', url)
    .on('load', function() {
      $(".test").append(img).fadeIn(400);
    });
}

(function() {
  setTimeout(function() {
    $(".bgImage").fadeIn(400);
  }, 3000);

  loadImage()
})()

.content {
  z-index: 1;
  position: relative;
  margin-top: 20px;
  text-align: center
}
.initials {
  position: fixed;
  background: black;
  color: white;
  width: 60px;
  height: 60px;
  margin-top: 20px;
  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;
}
.bgImage {
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  width: 100%;
  height: 60px;
  position: absolute;
  display: none;
  z-index: 0;
}

.test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="initials">
  <div class="bgImage"></div>
  <div class="content">A</div>
</div>

<div class="test"></div>

Reference - Asychronously load images with jQuery.

The ideal way would be using `Promise`.On load call a function that loads image and once done, this function will return promise. Based on this promise, you can fadeIn div. Unfortunately even I have to learn promise part, but will updated my answer using callbacks — Rajesh, Dec 18 '15 at 09:25
@Zack I have updated my answer. I also found a post to load async images and have given link of it. Hope this helps! — Rajesh, Dec 18 '15 at 09:42

score 1 · Answer 8 · answered Dec 18 '15 at 10:54

1

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

answered Dec 18 '15 at 10:54

Zamani Zam

11
1

It would help if you provided a little context around your answer. Why is yours different than the answers above? What does it do to the solve the problem? Does it even solve the problem? – Derek Van Cuyk Dec 18 '15 at 11:05

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

8 Answers8