Background images in table cells are either there or not, as you saw in Topic 37. You either define them in the HTML, or you don't, and the browser takes care of the rest. If the amount of content in the table cell exceeds the physical size of the image, the browser tiles the image. If this is the effect you want, then good for you. If you don't want this effect, then too bad. Not so with background images in CSS divs. CSS provides a number of design options. You may tile the image if you like in a variety of ways, or you may display it one time and one time only. You may also specify where in the div your background image should appear. Start with a typical div, like this:
To add a background image to the div, use the background-image attribute, like so: <div style="width: 200px; background-image: url(images/mecury.jpg);"> Notice that you enclose the path to the image within the url(...) construction. Adding the background-image CSS attribute alone gives you a div that behaves very much like a table cell in that the background image tiles, as Figure 38.1 shows. Other CSS style definitions allow you to fine-tune the behavior of the background image. Figure 38.1. When you specify the background-image CSS attribute and nothing else, the background image tiles.If you do not want the background image to tile, say so in the background-repeat attribute, as in Figure 38.2. Listing 38.1. View Source for Figure 38.2.<div style="width: 200px; background-image: url(images/mecury.jpg); background-repeat: no-repeat;"> Figure 38.2. To prevent the background image from tiling, set the background-repeat attribute to no-repeat.To position the background image in the div, specify a value for the background-position attribute, as in Figure 38.3. Figure 38.3. Position the background image with the background-position attribute.
Listing 38.2. View Source for Figure 38.3.<div style="width: 200px; background-image: url(images/mecury.jpg); background-repeat: no-repeat; background-position: center;"> Table 38.1 shows common values for CSS attributes related to background images. Remember, you should test your pages thoroughly before posting them on the Web, since browsers do strange things when you give them style definitions.
|