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