You can use a picture to create a tiled background for your Web page, with your text or other content sitting on top of it. The Web browser tiles the picture, by repeating it over and over until it fills the browser window, much like you would tile your bathroom floor. Figure 5-9 shows a Web page using a leaf pattern picture that creates a seamless background texture.
Figure 5-9: A Web page with a tiled background image.
Tip | If you decide to use a background image, choose one that harmonizes with the colors in your site. If the picture is too busy, the background may obscure the text and make the page difficult to read. Additionally, background images, like regular pictures, add time to your page's total download speed. The smaller and simpler your background image is, the faster the page loads. |
To insert a background image, follow these steps:
With a page open in Design view, choose Format Background.
The Page Properties dialog box appears, with the Formatting tab visible.
In the dialog box, select the Background Picture check box.
In the corresponding text box, type the graphic file's path.
Alternatively, click Browse to select the file from another location.
If you want the background to appear fixed, select the Make It a Watermark check box.
Watermarks are the same as regular backgrounds, except that watermarks appear fixed in place if viewed with a Web browser-when a visitor scrolls around the screen, the text appears to float above the fixed background. (With regular background images, the background and text move together when a visitor scrolls around the page.)
Click OK to close the dialog box.
The background image appears in your page.
If the background image is stored in a location other than in the open Web site, the Save Embedded Files dialog box offers to import the graphics file to your Web site the next time you save the page. Click OK to import the file. (We tell you how to use this dialog box earlier in this chapter, in the section "Adding a picture from another application or location."
Tip | Here are some tips to keep in mind when creating a background for your page:
|
GLANCE AT THE CODE | Look at the code for a background image: <body style="background-image: url('leaftexture.gif')"> |
The <body> HTML tag identifies the start of all the page content that is displayed in the Web browser. Everything related to the page-pictures, headings, paragraphs, lists, links-goes between the opening <body> and closing </body> tags. (Scroll to the bottom of your page; you see the closing tag, right before the "back cover" of all HTML pages, </html>.)
To specify the background picture for the entire page, Expression Web inserts an inline style in the body tag: style=“background-image: url(‘leaftexture.gif’)“.
If you make the page background picture into a watermark (select the Make It a Watermark check box on the Page Properties Formatting tab), Expression Web adds the background-attachment style property to the body tag, like this:
<body style="background-image: url('leaftexture. background-attachment: fixed">
Using styles, you have a lot of other options for customizing your page background. We talk in Chapter 7 about how to customize the styles that Expression Web automatically generates.