Adding a Tiled Background Picture


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.

image from book
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:

  1. With a page open in Design view, choose Format image from book Background.

    The Page Properties dialog box appears, with the Formatting tab visible.

  2. In the dialog box, select the Background Picture check box.

  3. In the corresponding text box, type the graphic file's path.

    Alternatively, click Browse to select the file from another location.

  4. 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.)

  5. 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:

  • You can choose a solid color rather than a picture as your page background. Solid background colors load instantly and are often easier to coordinate with the color scheme of the page. To specify a background color, choose Format image from book Background to display the Page Properties dialog box. Choose a color from the Background list box (or choose More Colors to pick a color from the More Colors dialog box), and then click OK.

  • Expression Web stores page background instructions in the page's style rules. By customizing the style for a page's background, you get more options than the ones described here. For example, you can specify that the background picture not repeat or repeat only horizontally or only vertically. We show you in Chapter 7 how to customize the styles that Expression Web writes.

  • Many of the Web site templates that come with Expression Web use tiled pictures as page backgrounds. If you see one you like, you can save the Web template and import the background picture file into your Web site to use on your pages. (We tell you how to import picture files earlier in this chapter.) You can also search for background textures and pictures on the Web. The Microsoft Office Online site contains a large collection of picture files for download, at http://www.office.microsoft.com/clipart/default.aspx?!c=en-us. (If this link doesn't work-Microsoft moves things around frequently-search for Microsoft Office clip art and media in your Web browser). You can also create your own background pictures in a graphics program.

  • Using CSS styles, you can create a "container" for your page's content so that the content appears to sit on top of your page background, much like a place mat sits on top of a tablecloth. This method is an attractive way to use page backgrounds and keeps them from interfering with a visitor's ability to read your content. Take a look at the Web site templates that are available with Expression Web for some examples of using background images this way (the templates Personal 5, 6, and 7 all use tiled background images). We talk more in Chapter 8 about laying out pages by using CSS, and we tell you how to create a Web site from a template in Chapter 1.

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.



Microsoft Expression Web for Dummies
Microsoft Expression Web For Dummies
ISBN: 0470115092
EAN: 2147483647
Year: 2004
Pages: 142

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net