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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.