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.
Add the following HTML code to
recipe-4.htmlto create the basic web page and elements to hold the background image and text:<!DOCTYPE html> <html> <head> <title>Chapter 7 :: Recipe 4</title> <link href="recipe-4.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> ...
