Organizational Research By

Surprising Reserch Topic

fading in a background image

fading in a background image  using -'jquery,background-image'

I have a web page that uses a large image for its background. I was hoping to use jQuery to load the image once it is downloaded (basically the way that loads its background image). Is this possible with jQuery? If so, is there a plugin that you would recommend?

asked Oct 13, 2015 by atulpariharmca
0 votes

Related Hot Questions

4 Answers

0 votes

This article may be useful. Copying from there:



DIV#loader {
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;

 * While we're having the loading class set.
 * Removig it, will remove the loading message
DIV#loader.loading {
  background: url(images/spinner.gif) no-repeat center center;


// when the DOM is ready
$(function () {
  var img = new Image();

  // wrap our new image in jQuery, then:
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    

      // with the holding div #loader, apply:
        // remove the loading class (so no background spinner), 
        // then insert our image

      // fade our image in to create a nice effect

    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded

    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
answered Oct 13, 2015 by mcasudhir
0 votes

You could first load the image, and then, when it has finished loading, set it as background-image. That way the browser will (hopefully) load the background image from the cache instead of redownloading it. As you requested it as a plugin:

 $.fn.smartBackgroundImage = function(url){
  var t = this;
  //create an img so the browser will download the image:
    .attr('src', url)
    .load(function(){ //attach onload to set background-image
          $(this).css('backgroundImage', 'url('+url+')' );
   return this;

Use it like this:

answered Oct 13, 2015 by 20shahi
0 votes

You can't use CSS background images, because it's impossible to attach an event to the loading of the images (as far as I know).

So I'll give it a shot, but haven't tested it:


... content ...


.bgimage { position: absolute: }


$(function() {
      .load(function() { $(this).fadeIn(); });
answered Oct 13, 2015 by deepak gupta
0 votes

You can go with the following trick, sorry if its a bit dirty.

Script :

        jQuery.preloadImages = function() {
        for (var i = 0; i < arguments.length; i++) {
            jQuery("").attr("src", arguments[i]);
            $('.box1').attr('preloadURL', arguments[0]);


    $(document).ready(function() {
        if ($('.box1').attr('preloadURL') == 'sky.jpg') {
            $('.box1').css({ 'background-image': 'url(sky.jpg)' },$('.box1').fadeIn(1000));

Markup :


.box1 {background-repeat:no-repeat; width:800px; height:600px; display:none; position:relative;}
    .Content { position:absolute; left:20px; top:20px; z-index:100;}
    .Content label { color:White;}

hope this helps

A little sample on :

answered Oct 13, 2015 by suyesh.lokhande