Chapter 38. Using Background Images in CSS Divs


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:

[View full width]

<div style="width: 200px;"> <p>Behold, the planet Mercury. It is one of the hottest places in the solar system due to its proximity to the sun.</p> <p>The planet Mercury is a small, arid, lifeless, desolate, sun-baked excuse for a heavenly body. Hardly anyone bothers to study it.</p> <p>Its only notable quality is the speed with which it orbits the sun, from which it derives its name. In Roman myth, Mercury, with wings on his heels, was the messenger of the gods, a divine postman and errand runner, the swiftest of deities.</p> </div>

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.


TIP

If you want the background image to tile only in the horizontal direction, set background repeat to repeat-x. Use repeat-y to make the background image tile only in the vertical direction.


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.

Table 38.1. Common CSS Attributes for Background Images in Divs

STYLE

CONTROLS

POSSIBLE VALUES

EXAMPLE

background-repeat

How or if the background image tiles

repeat-x, repeat-y, no-repeat, repeat

background-repeat:

repeat-y;

background-repeat:

repeat;

background-position

The position of the background image inside the div

Any combination of the following: left, right, center, top, bottom

background-position: left;

background-position:

right bottom;

background-position:

center left;

background-position:

center;




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

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