Applying Padding, Background Color, and a Background Image


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 Image
div.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.


Background Position Keywords

When you position a background image, you can use measurements (for example, 1em, 20%, and 5px) or you can use keywords (left, right, center, top, and bottom).


Unfortunately, some versions of Internet Explorer and Opera for Windows ignore keywords.

Luckily, these can be replaced with percentage values that have exactly the same effect.

If you want to position a background image at the right of a container, you can use a horizontal value of 100%. This will align the right edge of the image with the right edge of the container.

If you want to position a background image at the bottom of a container, you can use a vertical value of 100%. This will align the bottom edge of the image with the bottom edge of the container.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

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