Section 2 - Background Images

Download the XCF, HTML and image files for this section.

Background images are used on Web pages in many different ways. Besides their use as page backgrounds they can also be used in tables and DHTML layers. Designing a background image is as much a matter of knowing where the image will be used as what the image should contain.

We need to consider the three types of backgrounds you can use on a web site: page backgrounds, table backgrounds, and DHTML layer backgrounds. A page background is connected to a specific page and scrolls with the page. It is bound by the rendering rules of the browser, which often leaves small gaps between the page background and the browser border. Page backgrounds are also tiled over the full page (unless they happen to be larger than the page).

Table backgrounds come in three flavors: table, row and cell backgrounds. There really isn't much difference in these three other than the area of the table covered by the background image. The problem with table backgrounds is that using an image with anything other than tileable patterns seldom works right. The size of the table (or row or cell) doesn't take into account the size of the background image. You can't force a cell, for example, to be the size of the its background image without clever tricks using multiline text or clear images as spacers. Additionally, tiled image used as a row background is not guaranteed to be tiled from row to row. It's only guaranteed to be tiled within the row it is being used. So, the effect you're looking for is often much harder to find using tables than, say, with DHTML layers.

DHTML layer backgrounds are not really tied to a page, but to a layer in that page. That means the visibility of the background can be changed with javascript, the image can be set to not scroll, and the position of the layer can be more precisely set than a normal page background. DHTML layer backgrounds are more flexible than ordinary page backgrounds, but with flexibility comes complexity. Where a page background will nearly always be fully displayed, a layer backgrounds visible regions are dependent on a properly sized layer.

Because they are generally tiled, background images need to be seamless. If you're not familiar with this term, it means that the left and right edges could be placed next to each other and you couldn't see the edges (ditto for the top and bottom edges). Seamless tiles are not all that difficult to create, but it helps if you keep the images fairly bland - too much imagery makes seams harder to hide.

Adding a New Logo

In the upper right corner of the image we're going to add an oval shape. Inside of this we want to add a large letter W, and the letters "ilbur" and "idgets." These two bits of text will sit next to the W and vertically placed from one another. All the text and the oval are to be made to appear three dimensional.

Let's work on the oval first. Start with a new layer.

1. Use the elliptical selection tool to create an oval selection.
2. Choose a soft-edged, round brush that isn't too thick. I'm using the Circle Fuzzy 17 brush.
3. Stroke the selection in the new layer.
4. Turn off layer transparency.
5. Duplicate the layer twice.
6. Gaussian blur the first layer by 8 pixels in both X and Y.
7. Gaussian blur the second duplicate (topmost oval) layer by 3 pixels in both X and Y. The middle oval layer should not be blurred.
8. Offset the top oval layer by -3 pixels in X and Y.
9. Offset the bottom oval layer by 5 pixels in X and Y.
10. Select the top oval layer. Open the Curves dialog and drag the curve to the upper left square. This will brighten that layer but leave it a modest gray.
11. Change the top oval layers blend mode to Addition.

To fix the seams, use the Clone Tool from the Toolbox. Make sure you have a soft edged, round brush selected. While holding the shift key down, click on the background anywhere but over the seam. That selects the source from which you will be cloning. Now click and drag over the seam. The distance from the source to the mouse location is kept constant as you drag, so you get a nice smooth covering over the seam. If it doesn't look quite right, try reducing the amount of opacity in the Brushes dialog.

The only thing left to do is apply this to a web page. Figure 8-7 shows the web page with the tiled background image and our original logo. The original logo has been placed in a table, right justified, and a few table cells have been added with generic text, just so we can see the layout. We haven't talked yet about page layout issues using HTML yet. That topic is covered in Chapter 10 - Gallery Images in the book. For now, just take a look at the HTML used to generate this simple front page.

<html>
<body background="ww-bg.jpg">
<table width="100%" border="0">
<tr>
   <td colspan=2 align=right>
      <img src="logo1.jpg" border=1><br clear=both><br>
   </td>
</tr>

<tr>
   <td>This is some stuff.</td>
   <td width="90%" align=right>This is some other stuff.</td>
</tr>
</table>
</body>
</html>

Recap

Backgrounds images should be tileable and provide a soft contrast to the focal elements of a page. Background images do not provide navigation for a web site but can provide additional corporate identity to each page. While it is possible to have a single image cover an entire background, this technique is seldom used because the file size of the background slows the loading of the page.

Generating 3D effects on the background is simple to do. Using 3D effects can make the background more than a flat color or noisy pattern. It can also turn generic texture into corporate identity.

In general, the use of background images is discouraged in tables, rows and cells since the tiling of the image is not guaranteed to span rows or cells. Background images are also discouraged in use with DHTML layers until browsers have evolved enough to properly implement the DHTML layers specification

---

Prentice Hall PTR home | Essential Series home
© 2001 Prentice Hall PTR