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.
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.
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.