Adding a background graphic - Wiley Publishing For Dummies HTML for Dummies, pdf

In addition to setting a simple background color for your page, you can also specify a graphic to act as a background image for your page using the background attribute with the <body> element. This HTML assigns back. gif as the background image for the page:

A background image can be as small or as large as you like. Web browsers automatically repeat (or tile) the image across and down the page to fill in the background. Figure 7-2 shows the background image

back.gif, which is a 2-inch-by-2-inch square:

Figure 7-2: A back-ground image can be any size; the browser tiles it to fill in the entire page background.

Tip A browser has to download any background image before it can display it behind your page. Keep your background images small. A 2-inch by 2-inch graphic will load much faster than a 6-inch by 6-inch one, and the effect will be the same.

When you add the background attribute to the <body> element from Listing 7-1, the complete element with all its attributes is:

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures

List of Tables List of Listings List of Sidebars

Figure 7-3 shows how the browser tiles the small back.gif image to fill the entire page.

Figure 7-3: A Web page with both colors and a background image defined.

Notice that the HTML for the <body> element includes the bgcolor attribute even though the

background attribute defines an image background for the page. A background image always displays instead of a background color, unless a user has turned off the image display settings in his or her browser.

Tip If a browser can’t display images, it displays the background color. Be sure to define a background color as a fallback to a background image, especially if your text is light and you’re counting on the background to make the text readable.

Warning Just as you have to coordinate text colors and background colors, you have to coordinate text colors and background images. In Figure 7-4, the background image is light, as are the text and link colors, so the text is unreadable.

Figure 7-4: Be sure to coordinate your text colors and background colors, or your page may be unreadable.