Customizing Page Backgrounds

Many of iWeb's page templates have background images or patterns. By using the Page Inspector, you can customize the backgrounds of Web pages in several ways. Open the page that has the background you want to customize, then display the Page Inspector. Choose one of the following options from the pop-up menu in the Page Background area.

Color Fill. Give the page a solid background color. After choosing Color Fill, click the color well (located below the pop-up menu) to display the same Colors window used by other Mac programs, including iMovie HD, iDVD, and iPhoto.

Gradient Fill. Add a gradient (a gradual shift from one color to another). After choosing this option, use the controls below the pop-up menu to fine-tune the gradient.

Image Fill. Add a photo or other graphic to the background. Use the controls below the pop-up menu to fine-tune the fill (see "Using Background Images," at right).

Tinted Image Fill. Similar to Image Fill, this option lets you add a color tint to the background image. To make the color more or less transparent, use the Opacity slider in the Colors window.

Changing the Browser Background Color

At the bottom of the Page Inspector is a color well for customizing the background color of the browser window. This is the area outside the dimensions of your Web page: if you imagine your Web page as a sheet of paper, the browser background color is the color of the desk on which the paper rests.

Visitors to your site who have relatively small displays may not even see the browser background color, but those lucky folks with 30-inch Apple Cinema Displays are quite likely to.

Normally, the browser background color is white, but you can change the color by clicking the Browser Background color well and then specifying a new color. Note that you won't see the new color in iWebyou'll need to publish your site and view it in a browser in order to see the color.

Tip

To pick up a color that is present elsewhere on your Web page, click the magnifying glass in the Colors window, and then click on the color you want to match. This trick works in any Mac program that uses the Colors window.

Creating Background Textures

Web browsers have a cool capability: they can repeat, or tile, a small image so that it completely fills the background of the Web page.

Web designers take advantage of tiles to create page backgrounds that have interesting textures or patterns. Because a Web browser can tile a small image, the Web designer doesn't have to worry about creating a massive background graphic that's big enough to accommodate any size of browser window.

You can download an astronomical quantity of free page-background textures from a variety of Web sites. Do a Google search for web page backgrounds, and prepare to spend a lot of time exploring.

Once you've found a pattern you like, drag it to your desktop. Then drag that icon into the image well of the Page Inspector, (see the opposite page) and choose the Tile option from the pop-up menu.

You'll find a lot of garish, busy background patterns out there. Avoid themthey'll make your page look amateurish and will impair the legibility of your text.

Using Background Images

Adding a background image or texture to a Web page can be a nice way to dress it upprovided that the image or texture doesn't impair the legibility of the page's text.

To add a background image to a page, choose Image Fill from the Page Background pop-up menu in the Page Inspector. Then add the image and specify how you want iWeb to display it on the background of the Web page.

Here's a look at each image-fill option.

For this example, I added a solid white shape to the navigation bar so that its text didn't appear superimposed over the image.

Scale to Fit. iWeb displays the entire image, with no cropping. With horizontally oriented images, this option is likely to leave large borders above and below the image.

Stretch. iWeb fills the page with the image, altering the image's proportions to avoid any cropping. The image is likely to have a squished or stretched appearance.

Original Size. iWeb displays the image at its original size. For large images, such as digital camera photos, you're likely to see only a small part of the image on the page.

Tile. iWeb repeats the image across the background. Use this option to create background textures, as described on the opposite page.