Animating background images

Fullscreen image backgrounds can provide a very attractive splash screen for any website. This recipe will show you how to use jQuery to dynamically change the background image of your website.

Getting ready

Create recipe-4.html, recipe-4.css, and recipe-4.js in the same directory as the jQuery library. For this recipe, you will also need a set of images that will be used as the background images. Find three or four large images (upto 1280 X 1024 px in size), and save them in the same directory as the three files you have just created.

How to do it…

Have the three files you have just created open and ready for editing.

  1. Add the following HTML code to recipe-4.html to create the basic web page and elements to hold the background ...

Get jQuery 2.0 Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.