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?
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.
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.
Yes I see that. I will revise the code as soon as i can.
any further developments on the fix for resizing the browser and the background image resizing?
Get tutorial otherwise- thanks
I haven’t had time. Real soon. in my to do list.
it is really good,a wonderful background grasp your eyes,it may bring u traffic.i wil try it.
Is there any way to do this with Joomla?
I’m trying to get it accomplished, but can’t.
Thanks,
Max
it should be doable. this is all front end. Joomla has a good templating engine.
Yeah, Joomla is great. However, since it’s not straight up html, it’s a bit confusing as to where to put the code snippets. If you ever come across any tutorials on this please let me know. Thanks -M
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.
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.
if they’re stacked up then there’s something wrong with your javascript. make sure your calling the function to run.
also, ck jquery is included. you need tools like firebug to see the js errors.
This is an awesome tutorial! Thank you! I have spent about a week trying to program this from scratch. π
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?
add it in between <script> tags. make sure it comes after the inclusion of the jquery library.
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.
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
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>
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?
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?
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.
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.
Nope, sorry again. The original post reappeared after I submitted the second one.
Anyone found a way to get the images to resize with the browser window on the fly yet? Would be perfect with this.. Thanks!
something like
$(window).resize(function() {
..resize image here
});
Amazing things here. I am very glad to see your post. Thank you a
lot and I am looking forward to touch you. Will you kindly
drop me a mail?
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;
}
Well written job. People should read this.
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.
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!
ΒΏTienes Facobook? Te quisiera agregar…
I tried this but no luck the images do not rotate..
i checked the code all seem ok
any ideas?
make sure you have the jquery first, then the plugin installed.
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!
any idea on how to add captions to each slide?
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!
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!
Sorry – need to mention that in my last link (tryonfarm.com) I’m controlling the background to the DIV tag via CSS, it’s not in the actual HTML.
Hi,
can you share the code you had used for perfect scaling?
Thanks
awesome work michele.
Hi,
is there a solution for perfect scaling as yet?
Yes, I believe it’s “background-size: cover” in the css. But I haven’t tried it.
hello michael,
can we change the position: fixed for bg image
“background-size: cover;” doesn’t work. The first image still scales fine, but the subsequent images (as well as the first image on the loopback) do no scale. Has anyone figured this out yet?
Hi, it’s quite obvious:
As the bg-picture is in a div container the tag background:cover in the css does not apply.
it would though if the pic was set as div background but then again the rotating would not work…
http://www.wetransfer.com is using the same technique for their announcements but apparently they have a flash version…
I’ve found this other tutorial which may work with setting width & height in %, but haven’t tried it yet…
Cheers & thx for the good work…
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
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);
}
});
});
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
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?
Hello,
I totally love your opinion! Good job on the design features on your web site.
.!
Thanks.
Well this is great i am using it in one of my web sites and didn’t noticed any problem with size og images…Thank’s a lot to everyone who made this keep up with more work!!
awesome tutorial! thanks
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.
Where and how to add these codes in my HTML page ?
Thanks
Nice. Would it be better for load time to set each as a background-image in the css… instead of img tags in your markup? Just askin.
Is it possible to apply this to a single div?
hello!!! thank you so much for this tutorial I’m wonding how i can have this scroll automatically ( like it is doing ) AND on a click
Thank you again!
Meredith
Everyone loves it whenever people get together and share opinions.
Great website, stick with it!
Thanks for every other magnificent post. The place else could anyone get that type of info in such a perfect way of writing? I have a presentation next week, and I’m on the look for such info.
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
I know that you posted this comment 5 months ago, but I’m hoping someone can answer the question: When adding this script to keep the image size large enough to cover the page is there a way to maintain the aspect ratio? It seems to stretch the image width wise when you enlarge the window – which is definitely not desirable.
kelp, try the techniques used here: http://css-tricks.com/perfect-full-page-background-image/ .. or maybe these css property / values:
background-position: centre centre;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
post back here if it works
I also came across this jquery plugin just now: http://srobbin.com/jquery-plugins/backstretch/
Did you try Michael’s ideas? I am also curious about this!
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!
It Works perfectly!!! Wonderful job!!! Easy and powerful code!!! Thanks a lot!!! Regards from Brazil
it is rather confusing, the way the code is given. i can’t get it working, the images get stuck….
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!
Great !
but it works only in html page …
in aspx files the cycle function is not working …
Where is a bug. If you open page in browser not full window and then restore it, you’ve got a image that not fill a background.
There is a simple way to achieve this. Without using a plugin, I had written this article to change background color dynamically, you can set images instead of colors and with little jquery fade effects to achieve the same effect:
http://codeforbrowser.com/blog/changing-background-color-using-javascript-and-jquery/
When you are asked to download the j query, there is a load of codes. Do we suppose to paste that code on the html
Thanks man
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
thanks mattrock1
Thanks a lot but i wonder
How can I top center the small image?
great tutroial, just a quick question it seems to run through all the images very quickly then goes to first image and do nothing?
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?
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;
}
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;
}
is there any way to add a button, so I can switch the photos manually?
im sure you can. add a click handler and add the rotateimages inside it.
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…
separate file or above the closing head should work.
My last reply should’ve ended with ” / / seperate file
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.
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.
I added links to background images and it does not seem to work.
links to the background images can be quite tricky to achieve. since they’re positioned absolute – anything in front of it will take over.
so how do you fix this
would have to be a different technique other than absolute positioning the background.
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
you can wrap it in a div – with a percent height. add your content outside that div.
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
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 :(…….
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.
linking the bg images is iimpossible, can you correct this please
hi there, great post. I’m trying to use 1024px width images centered but it doesn’t work. any ideas ? thanks
you forgot the tag for the last code π
is it possible to stop the rotation when click and resume on click again?
thx
Hi there im trying to add the CSS step into my CODE in code view in Dreamweaver and cannot manage to get it working – where do i place it ?
thanks v much Good π
is it possible to implement this into joomla?
its great. works nice for me. thanks a lot…..
After inserting the slideshow code the pictures still all showing
Excelent really helpfull!
thanks!
Can’t get this work. All the images are stacked on top of each other. Any ideas ?
http://www.twincitywx.com/wdl/indexrotate5.html
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
});
});
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’ ?
Works well with SharePoint 2010, thanks a lot π
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?
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!
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.