Maddog's HTML Primer for Real People

Chapter 6, Lesson 3

Ch 6, L 3 - Background Textures and Images

If you already know how to specify an image to be used as the background for a web page , you can skip this lesson.

Do you notice anything different? No, no, I don't mean my haircut (but thank you for noticing). I mean about the background. I've embedded an HTML instruction in this page which tells the browser to read an image file (of my specification) and use it to construct the background for this web page. You'll see that it's the same familiar "maddog's HTML for Real People" image that's been forced on you at the top of every lesson. Actually, I've made it much lighter so that it doesn't distract too much from the text. (I'm not sure I was very successful...mea culpa...)

Wanna know how to do it? First, you need to select an image file that will make a nice background (the one I selected ISN'T!) Let's say you're building a web page to find your internet sweetheart (aw, ain't that touching...). So you find a heart image that's not too big, and not too small, and doesn't have such dark, bright colors that it would make text unreadable. A good size would be from 40 x 40 pixels to 100 x 100 pixels. The image can actually be any size, but to avoid long download times on your web page, try to keep the file size reasonably small.

Once you have your image selected, use the following 'BACKGROUND' attribute inside the opening 'BODY' tag, like so:

The reference for the BACKGROUND attribute must be placed inside quotation marks. Normally, the reference will be file name of an image (a file which resides in the same directory and web space as the HTML file). However, you can also use a URL for the reference, pointing to an image file residing somewhere out there in cyberspace. You may use either a JPEG format or GIF format image file. I recommend using JPEG images for backgrounds wherever possible, because they take less time to download. This is one time you don't have to worry about browser compatibility, because most of the browsers which support background images also support inline JPEG images.

What happens when the browser encounters a valid 'BACKGROUND' attribute inside the opening 'BODY' tag? The browser immediately reconstructs the image, then (starting at the upper left-hand corner of the document window) paints the image as many times as it needs to, so as to fill the screen.

There are still lots of browsers out there that don't support background images, so it's probably a very good idea to specify a background color also. When specifying a background color, try to specify one that is approximately the same color as the dominant color in your background image. When specifying both background color and background image, the method looks like so:

Let's look at some source code:


<HTML>
<HEAD>
<TITLE> Background Demo </TITLE>
</HEAD>
<BODY BGCOLOR="#C0C0C0" BACKGROUND="heart.jpg">
<CENTER>
<H3>Background Demo</H3>
it's a sweetheart of a demo, wouldn't you say?
</CENTER>
</BODY>
</HTML>

Look at the results --here--

It's a cool background image, but it doesn't do anything for readability, does it? A special case of background image is the background "texture". It's still an image file, but someone has gone to the trouble of making the image symetrical in all directions, such that when the browser paints it (repeatedly), it appears to be a seamless "texture" or "watermark" that covers the entire screen.

To demonstrate the use of a textured background, we'll substitute the image filename "gray_bg.jpg" for the image file name "heart.jpg" in the source code above, and create a new demo page, which you can view --here--

Much more readable, heh? Well, I've certainly learned my lesson, and we won't be torturing you by making you read over these cluttered backgrounds any more.

Overseer: Monty Northrup ...

... leave e-mail ...