Image Backgrounds
| The last topic in this lesson is using an image as a background for your pages, rather than simply a solid-colored background. When you use an image for a background, that image is tiled; that is, it's repeated in rows to fill the browser window. To create a tiled background, you need an image to serve as the tile. Usually, when you create an image for tiling, you must make sure that the pattern flows smoothly from one tile to the next. You can do some careful adjusting of the image in your favorite imageediting program to make sure that the edges line up. The goal is for the edges to meet cleanly so that you don't have a seam between the tiles after you've laid them end to end. (See Figure 7.31 for an example of tiles that don't line up very well.) You also can try clip art packages for wallpaper or tile patterns that are designed specifically to be tiled in this fashion. Some graphics packages, such as Photoshop and Paint Shop Pro, can also modify your images so that they work as tiles. This feature works better with some kinds of images than others. Figure 7.31. Tiled images with seams. When you have an image that can be tiled smoothly, all you need to create a tiled image background is the background attribute, which is part of the <body> tag. The value of background is a filename or URL that points to your image file, as in the following example: <body background="tiles.gif"> <body background="backgrounds/rosemarble.gif"> You can also include background images on your pages using CSS. To include a background image on a page (or under any block element), the background-image property is used. Here's an example: <body style="background-image: url(backgrounds/rosemarble.gif)">By default, the background image is tiled both horizontally and vertically. However, using the background-repeat property, you can control this behavior. Options include repeat (which tiles the image horizontally and vertically), repeat-x (tile horizontally only), repeat-y (tile vertically only), and no-repeat. You can also specify whether the background image scrolls along with the content of the page or remains in a fixed position using the background-attachment property. The two values there are scroll and fixed. So, if you want to put one background image in the upper-left corner of the browser window and have it stay there, you would use the following: <body style="background-image: url(backgrounds/rosemarble.gif); background-repeat: no-repeat; background-attachment: fixed"> What if you want the background image to appear somewhere on the page other than the upper-left corner? The background-position property enables you to position a background image anywhere you like within a page (or element). The background-position property is a bit more complex than most you'll see. You can either pass in two percentages, or the horizontal position (left, right, center), or the vertical position (top, bottom, center) or both the horizontal and vertical position. Here are some valid settings for this property:
Here's a <body> tag that places the background in the center right of the window and does not scroll it with the page: <body style="background-image: url(backgrounds/rosemarble.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: center right"> Rather than using all these different properties to specify the background, you can use the background property by itself to specify all the background properties. With the background property, you can specify the background color, image, repeat setting, attachment, and position. All the properties are optional, and the order isn't important either. To condense the preceding specification into one property, the following tag is used: <body style="background: url(backgrounds/rosemarble.gif) no-repeat fixed center right"> If you like, you can also include a background color as well. Here's what the new tag looks like: <body style="background: #000 url(backgrounds/rosemarble.gif) no-repeat fixed center right"> |
EAN: 2147483647
Pages: 305