Change Background Image of DIV using jQuery




This tutorial explains how to change background image of a div at specific intervals using jQuery. Every element can have only one background image at any point of time according to CSS and to make an element use multiple backgrounds, we have to cycle the images to change at regular intervals. This can be achieved by dynamically assigning background images using css() jquery method and adding a simple fadein/fadeout effect would make it look more neat.

This can be used for simple background image switches, for other image and content cycling that require heavy animations it is highly recommended to use one of the jQuery slider plugins or create one using jQuery UI effects.



1. Prepare background images and place it in a folder. Create a new html file in the same folder and copy paste the below code.


<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){   
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);            
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;">  
      </div>
</body>
</html>

Initially, when the page loads the first image is set as background image. After that for a period of every 5000 milliseconds the image is changed using setInterval function that executes periodically. To make the transition look more neat, I have added fadeIn/fadeout effects.




If you think this article and other information on this website is useful to you, please keep yourself subscribed via email or other social networking sites to be notified whenever more useful articles are posted here. Thanks for reading!



Subscribe to GET LATEST ARTICLES!


Related

Latest 1421167339148854348

Post a Comment

  1. A very nice tutorials! Thanks for the updates

    ReplyDelete
  2. Is this method reliable for browser compatibility?

    ReplyDelete
    Replies
    1. Hi Irene,

      We have used jQuery Fade in -out effects. As far as I know, it works well in all modern browsers and in IE from version 9 onwards. There are workarounds for making it work in IE8.

      Hope this helps!

      Thanks,
      Priya

      Delete
  3. Nice tutorial, is there anyway we can add pagination in the code?

    Thanks

    ReplyDelete
  4. how you can make a fade avoiding overlapping images to see for example the white background of the images?

    ReplyDelete
  5. Gracias por excelente material. Le quité el efecto de fadeIn-fadeOut y funciona de lo mejor.

    ReplyDelete
  6. You can use other functions other effect than the "#slideit"

    ReplyDelete
  7. Nice. But which function should I ad, so that the images are random? tx.

    ReplyDelete
  8. as you are using jquery already I would use .each to save two lines of code :)

    ReplyDelete

emo-but-icon

SUBSCRIBE


item