Create Rotating (Full Paged) Background Images with CSS and jQuery

Full page background images on web sites has become more popular than ever. Its a good way to utilize the remaining real estate of the browser, without having to sacrifice content. But what about rotating these images? Wouldn’t that even be better?

jquery
This tutorial will walk you through how to create full page background images that rotate like a slideshow. We will be using CSS and jQuery – particularly the nifty cycle plugin. Ready to get started? Let’s begin:

The HTML Markup:

First we create the background images. Place them in your root folder, in a directory called “images”. We wrap them around a special DIV which houses all the images. We need this DIV so we can target it from our script later:

Make sure your image is a good sized horizontal shot. For almost all screen resolutions have wider width vs height. Our images will scale to the width of the screen. The DIV id=”wrap” is the container for your content. This is directly underneath our slideshow container. Save your HTML and view it in the browser. You should see a series of images on top of each other.

The CSS

Add this code to your page. This will set the images width to span the entire page.

View Refresh your page. You should see only the first image. The rest of the images are tucked away underneath the first one. This is what “z-index” and “position” properties in our code did. Now for the slideshow effect, we use some jQuery magic.

The jQuery

Download the jQuery Cycle plugin from here, and place it inside a directory called “scripts” in your root folder. Add the jQuery library and a reference to the plugin inside the head section of your HTML.
Then add the following code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin:

You can choose to edit the plugin options by tweaking the above code. For the list of available options such as transition effects, timing and callbacks – refer to the jQuery Cycle docs.

Conclusion:

Now refresh your browser and you should see your background fade into the next image and to another. Like I said, this style can be quite refreshing – to vary your page from a million other websites out there with large image backgrounds. There is a bug in some browsers when re-sized, the image stays in the original size and doesn’t adjust on the fly. Maybe someone out there can improve through Javascript or CSS. Please leave a comment below.

117 Comments

  1. Great post, very detailed and easy to understand.
    Only one problem, I notice in Firefox when I try to resize the browser window the background image doesn’t resize with the browser and it starts to become off centered.

    Reply
  2. I tried to use this script because I became curious on how you are able to change background images. I copied the script plus plugins, replaced with my own images, uploaded and the images are working. The problem I am having is with the z-index (I think). The CSS image is not being placed over the background but is at the bottom of the background image. Is it
    the z-index, div, or something else? I have included the url to show you what I am talking about. If you need any further information with this let me know.

    Reply
  3. This is fantastic. I would so love to put this on my site. I am trying to put this in a Weebly website. All my images are stacked on top of one another. Does anyone know if there is a special code for activating the slideshow in Weebly ? Please help.

    Reply
  4. I am having a hard time with this! Where do I enter this code:

    $(document).ready(function() {
    $('#slideshow').cycle({
    fx: 'fade',
    pager: '#smallnav',
    pause: 1,
    speed: 1800,
    timeout: 3500
    });
    });

    When I enter it I’m either doing it in the wrong place or it’s just not working :(. Can someone help?

    Reply
      • I think I’m not getting how to link the library, I saved the coding in the jQuery plug-in and saved the text as an html. Should it be a different extension? And then I copied those 2 tags you have. Can I just pay you to fix my file for me? haha, this is just not working for me.

        Reply
  5. Hiya,
    When I paste in this part of the code:
    #slideshow, img.bgM {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-9999;
    }
    (in which it says the images should be on top of one another so you can only see one)
    The images are still all in view and the code comes up as text – it doesn’t seem to be recognised as code. Am I doing something wrong? Also where exactly is it meant to be pasted?
    Thank you

    Reply
    • you should wrap the code in style tags. so like this:

      <style>
      #slideshow, img.bgM {
      min-height: 100%;
      min-width: 1024px;
      width: 100%;
      height: auto;
      position: fixed;
      top: 0;
      left: 0;
      z-index:-9999;
      }
      </style>

      Reply
  6. Thanks for the great plugin! I have one question though: The images do not resize on an iPhone (tested with iPhone 3G). Do you know of a way to do this?

    Reply
  7. How do I make the function happen once: start with one image, wait a specific time, then rotate to a second image, then stop, leaving the second image in place until reload or refresh?

    Reply
    • first take it out of the cycle plugin. Then you’d have to write your own js – something like a loop that stops at images.length, put something like setinterval in each iteration for the timing. for remembering the second image – i’m not sure how you can do that – maybe set a cookie – remembering the last image. but then you have ck for that cookie at each refresh.

      Reply
  8. Any ideas as to how to cycle the slideshow through only once and stop?
    Sorry for asking again; my comment/question seemed to have been deleted.

    Reply
  9. Anyone found a way to get the images to resize with the browser window on the fly yet? Would be perfect with this.. Thanks!

    Reply
  10. Here’s code to make the images resize immediate as you resize the browser window.

    #slideshow {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    z-index:1;
    }
    img.bgM {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
    z-index: -99;
    }

    Reply
  11. Good day I am so happy I found your blog, I really found you by
    accident, while I was looking on Google for something else,
    Anyhow I am here now and would just like to say
    thanks a lot for a incredible post and a all
    round thrilling blog (I also love the theme/design), I don’t have time to read through it all at the minute but I have book-marked it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the excellent work.

    Reply
  12. Man, this is awesome!
    Never saw a code as clean as this one to do this effect!
    Great job!
    Ps: This works like a charm using no conflict, and is quite simple!

    Reply
  13. This has been very easy code to implement. Thank you! One question that I do have is I am trying to modify the position of the opaque text box. How do I go about doing that? I am assuming that is in the css, but I have not had success in locating where or how. Thanks!

    Reply
  14. You really make it appear really easy with your presentation however I find this topic to be actually something which I believe I might by
    no means understand. It kind of feels too complex
    and extremely broad for me. I am looking ahead to your next post, I will attempt
    to get the dangle of it!

    Reply
  15. Hi there! Implemented this script pretty easily, although it’s not exactly what I’m looking for, so I have two questions (with the caveat that I’m not a developer, just a smart HTML/CSS gal)…
    1. The scaling of the image works perfectly for the first image, but once the browser window is scaled (larger or smaller) the following images seem to be stuck – they don’t scale to the browser window size. Is there a way to fix this? I’d recommend keeping the script this way if I can fix the scaling issue.
    Sample: http://tryonfarm.com/index_slideshow.html
    2. Ultimately, I was searching for a script that would randomly show one large background image per page load (not a slideshow) that scales properly to the browser window. I have tried combining your script with a Dynamic Drive Script but I loose the scalability of the image. Is there a way to modify your script that works better than my attempt below, or might you be able to point me to a script that does what I’m hoping for?
    My sample: http://tryonfarm.com/index_rotate.html
    Here’s what I have right now, which also works alright, but doesn’t scale (needed to use gradient edges for larger screen resolutions) and doesn’t randomly rotate through images on page load: http://tryonfarm.com/
    Thanks a bunch for any help/suggestions!

    Reply
  16. I liked your rotating background images. I want to know is it possible to add description text to rotating images. please advise how to code this.
    thanks

    Reply
    • yes it’s possible. make sure each image has an “alt” atttibute. then it the javascript where you’re setting the cycle plugin options, add the option “after” with an anonymous function that grabs each image’s alt. now create a div with an id caption outside the slideshow – and this will be filled with the alt text.

      $(function() {
      $('#slideshow').cycle({
      fx: 'fadeZoom',
      timeout: 2000,
      after: function() {
      $('#caption').html(this.alt);
      }
      });
      });

      Reply
      • Thanks for your prompt response.I regret I do not know any thing about java and scripts it is like Greerk and Latin to me. Having taken so much trouble will you please advise how and where to insert this code to dispaly descriptions and texts.
        This will also help many netizen like me.
        Thanks

        Reply
  17. this is a much simpler version than supersized! However the first image looks fine but then they become squashed/distorted after the other slides have passed?

    Reply
  18. Aw, this was an extremely nice post. Taking the time and actual effort to generate
    a good articleΒ… but what can I sayΒ… I
    procrastinate a whole lot and don’t seem to get nearly anything done.

    Reply
  19. Thanks for this info Michael.
    It really got me where I needed to go.
    One issue I had was that the images loaded to the size of the current window so when I resized the window to a larger screen the image wasn’t wide enough to fill the new space unless I refreshed the screen.
    I looked up the jQuery Cycle plugin and saw that it would cycle anything so I made some modifications to your code.
    I made several divs with the class=”slide” and applied the image to the div as a background image inside the original SlideShow Div.
    Then I removed the “bgM” class for your style and replaced it with the slide class.
    Then I edited the values for min-height, min-width and width as shown below.
    Tested and appears to be working very well.
    ———————————
    #slideshow, .slide {
    min-height: 110%;
    min-width: 110%;
    width: 110%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-9999;
    }
    ———————————

    …your content here

    Reply
  20. This is fantastic. I love the flexibility of it.
    I’m using it to cycle through images for the landing page of my portfolio site – with a few alterations. (1) I’ve wrapped all of the images in anchor tags – as you suggested at the bottom of your post (2) I’ve actually made the images all background-images in my css to aid in the creation of a more flexible layout.
    I won’t say its perfect yet – but I think its kind of cool. Check it our here: jaredkoppdesign.com … if you drag the corner of your browser around while it cycles through the images you can see that the resize is a little buggy after the first image. Would love some feedback on ways to improve this. (If possible.)
    Thanks for the tutorial!

    Reply
  21. I do not even know how I ended up here, but I thought this
    post was great. I do not know who you are but certainly you
    are going to a famous blogger if you are not
    already πŸ˜‰ Cheers!

    Reply
  22. Great post!
    I should add for anyone running into any hiccups running through this tutorial – take note that the file name of the local js file differs in the above code example and the downloaded file. It should be (well, current as of today anyway)
    scripts/jquery.cycle.all.js
    not
    scripts/jquery.cycle.all.2.74.js
    Cheers!
    scripts/jquery.cycle.all.2.74.js
    scripts/jquery.cycle.all.2.74.js

    Reply
  23. great tutroial, just a quick question it seems to run through all the images very quickly then goes to first image and do nothing?

    Reply
  24. Very cool script!
    Just one question: on my website, I’m running the Lightbox script to enlarge my images. When I implement your script for the background, the Lightbox script doesn’t work anymore. Any suggestions?

    Reply
  25. Great script, exactly what i was looking for!!
    Is there anyway to centralise the background images. I am using 1600px size images that don’t need to 100% the width of the browser.
    Ive tried the following CSS but it places a horizontal scroll bar when I resize the browser under 1600px wide??
    body {
    width: 1600px;
    margin-right: auto;
    margin-left: auto;
    }
    #slideshow, img.bgM {
    min-height: auto;
    min-width: 1600px;
    width: 1600px;
    height: auto;
    position: fixed;
    top: 97px;
    left: auto;
    z-index:-9999;
    background-position: center;
    right: auto;
    }

    Reply
    • I did the same but with fixed height images:
      body {
      width: 2300px;
      overflow:hidden;
      margin: 0 auto;
      }
      #slideshow, img.bgM{
      height: 350px;
      width: 100%;
      overflow: hidden;
      }

      Reply
  26. This is exactly what I’m looking for!
    I haven’t written any html/css in ages though and I’m at a loss at where to put the various pieces of code…
    Could you add where to put everything for dummy’s (like me).
    / / seperate file
    That’d be great! Thanks in advance…

    Reply
  27. I am using this code with wordpress. It works on my homepage but the image does not rotate on the others. I placed the code within the header file of my template.

    Reply
    • You need to put full path to script dir. mabe better is to make new header for another pages (except of index page) and then modify the path of script dir.

      Reply
  28. What if I would not like it to be full paged, I want it to be full width but not fixed and not all the way to the bottom of the page so I can write content with white bg

    Reply
  29. Thanks for the post…
    I tried it and it works fine on moz, chrome and ie when itΒ΄s offline. When i put it online it does’nt work on chrome. Any suggestions?
    Pedor

    Reply
  30. Please help!!! Ive been playing with this for 12 hours, and I barely have any hair left!
    In the browser the proportions are not constrained in both axis. the image squashes when you go narrow.
    I have tried every piece of script I can think of to get it to stay true and it just won’t work – is there compatible script ? or do I need to start from scratch another way? answers or valium on a postcard :(…….

    Reply
  31. forgotto mention – I want it to shriek right down while keeping proportions too, this works quite well by replacing the min width with a smaller figure, but again the problem experienced by the default -(unconstrained proportions) is exentuated if you resize your browser.

    Reply
  32. Where do I add this, specifically?
    Then add this code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin:
    $(document).ready(function() {
    $(‘#slideshow’).cycle({
    fx: ‘fade’,
    pager: ‘#smallnav’,
    pause: 1,
    speed: 1800,
    timeout: 3500
    });
    });

    Reply
  33. not working for me – sorry, where exactly do I ‘add this code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin’ ?

    Reply
  34. Ive tried to implement this code as i want the background to slide show images of the work we have undertaken. It started to work however it get stuck on the last image. Can one write the code that the slide show starts from the beginning again i.e. it rotates?

    Reply
  35. I had spent over eight hours trying to figure out how to do this on my own and with code snippets from the Internet. Then I found this tutorial and got it working perfectly in a matter of minutes. Thank you so much for explaining this clearly and concisely and including code that works so well!

    Reply
  36. I am trying to use this on a test site, but I am seeing a VERY long time in between each image. The background fades to white for a few seconds before the next image loads. Can anyone help? I’m using the exact cycle functionality from the example.

    Reply

Leave a Reply to laoboy's BLOG » Create Rotating (Full Paged) Background Images with CSS and jQuery Cancel reply