getButterfly Logo getButterfly

jQuery/CSS fullscreen background slider

This is a simple jQuery/CSS fullscreen background slider, compatible with all modern browsers. IE 8 and below were not invited to this party.

jQuery code:

var i = 0;

setInterval(function() {
   // add total number of images (all cases start from 0)
   switch(i++%4) {
      case 0:
         $('html').css({
            'background' : 'url("slides/birmingham.jpg") no-repeat center center fixed',
            '-webkit-background-size' : 'cover',
            '-moz-background-size' : 'cover',
            '-o-background-size' : 'cover',
            'background-size' : 'cover'
         });
         break;

      case 1:
         $('html').css({
            'background' : 'url("slides/manchester.jpg") no-repeat center center fixed',
            '-webkit-background-size' : 'cover',
            '-moz-background-size' : 'cover',
            '-o-background-size' : 'cover',
            'background-size' : 'cover'
         });
         break;

      case 2:
         $('html').css({
            'background' : 'url("slides/liverpool.jpg") no-repeat center center fixed',
            '-webkit-background-size' : 'cover',
            '-moz-background-size' : 'cover',
            '-o-background-size' : 'cover',
            'background-size' : 'cover'
         });
         break;

      case 3:
         $('html').css({
            'background' : 'url("slides/london.jpg") no-repeat center center fixed',
            '-webkit-background-size' : 'cover',
            '-moz-background-size' : 'cover',
            '-o-background-size' : 'cover',
            'background-size' : 'cover'
         });
         break;
   }
}, 3000);

CSS code:

html {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

   -moz-transition: background-image 0.8s ease-in-out;
   -webkit-transition: background-image 0.8s ease-in-out;
   -o-transition: background-image 0.8s ease-in-out;
   transition: background-image 0.8s ease-in-out;
}
body {
   overflow: hidden;

   -moz-transition: background-image 0.3s ease-in-out;
   -webkit-transition: background-image 0.3s ease-in-out;
   -o-transition: background-image 0.3s ease-in-out;
   transition: background-image 0.3s ease-in-out;
}

See a quick example here.


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a Reply

Your email address will not be published. Required fields are marked *