O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Including multiple background images

http://benthebodyguard.com had the Internet all abuzz when it debuted in December, 2010. The authors used a single-page layout to tell an interactive story of a fictional French bodyguard named Ben. As viewed scrolled down the long page, multiple backgrounds help tell the story of the then-soon-to-be-released iPhone application.

Getting ready

Let's check out http://benthebodyguard.com and scroll through the animation.

Getting ready

How to do it...

Let's focus on a snippet of the source code and see how the site authors utilized multiple backgrounds.

<!doctype html> <html class="" lang="en"> <head> <meta http-equiv="Content-Type" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required