Now that the container is positioned, you can style its appearance using padding, background-image, and background color. The first step is to apply padding to the container to create space around the image and caption. You can use the shorthand padding rule to specify values for top, right, bottom, and left. All sides should be given a value of 10px except the bottom, which should be given a value of 70px. This will provide some space for the background image. The background image can be applied using background-image: url(chapter11.gif) as shown in Figure 11.2. Figure 11.2. Screenshot of background image.
You must set a repeat value to avoid the image repeating across the entire background area of the container. In this case, you will need the image to repeat across the x-axis. This is achieved using background-repeat: repeat-x. The background image needs to be aligned with the bottom of the container. One way to achieve this is to set the vertical value to 100%, which will place the bottom of the image against the bottom of the padding area. The declaration would be background-position: 0 100%. The background color can be specified using background-color: #036. All of these background declarations can be condensed into one shorthand declaration as shown in Listing 11.4. The results are illustrated in Figure 11.3. Listing 11.4. CSS Code Setting Padding, Background Color, and Background Imagediv.imagecaption { float: right; width: 182px; margin: 0 1em 1em 1em; display: inline; padding: 10px 10px 70px 10px; background: #036 url(chapter11.gif) repeat-x 0 100%; } Figure 11.3. Screenshot of container with padding and background.
|