The first example uses an inline style to place a woodgrain finish behind a table. The second defines a list item class that places a marble background behind
tags that use the class=marble attribute. For example: Here's what's for dinner tonight:
Figure 9.1: Placing a background image behind an element If the image is larger than the containing element, it will be clipped to the area occupied by the element. If smaller, the image will be repeated to tile the area occupied by the element, as dictated by the value of the background-repeat attribute.
You control the position of the image within the element with the background-position property. The scrolling behavior of the image is managed by the background-attachment property.
While it may seem that a background color and a background image are mutually exclusive, you should usually define a background color even if you are using a background image. That way, if the image is unavailable, such as when the user doesn't automatically download images, the browser will display the background color instead. In addition, if the background image has transparent areas, the background color will be used to fill in those areas.
Netscape does not support the background-image property explicitly, but you may achieve the same effects through its support of the general background property, as discussed in section Section 9.3.4.6.
9.3.4.4 The background-position property By default, the styles-conscious browser renders a background image starting in the upper-left corner of the allotted display area and tiled (if necessary) down and over to the lower-right corner of that same area. With the background-position property, you can offset the starting position of the background image down and to the right of that default point by an absolute (length) or relative (percentage or keyword) offset. The resulting image fills the area from that offset starting point to the lower-right corner of the display space.
You may specify one or two values for the background-position property. If you use a single value, it applies to both the vertical and horizontal positions. With two values, the first is the horizontal offset, and the second is the vertical offset.
offsets the marble background 10 pixels to the right and 20 pixels down from the upper-left corner of any
element in your document.
Percentage values are a bit trickier, but somewhat easier to use. Measured from 0 to 100 percent from left to right and top to bottom, the center of the HTML element's content display space is at 50%, 50%. Similarly, the position one-third of the way across the area and two-thirds of the way down is at 33%, 66%. So, to offset the background for our example dinner menu to the center of the element's content display space, we use: background-position: 50% 50%
Figure 9.2: Marbled background offset to the center of the display So why use a number when a single word will do? You can use the keywords left, center, and right, as well as top, center, and bottom, for 0%, 50%, and 100%, respectively. To center an image in the tag's content area, then, you need only write: background-position: center center
You can mix and match length and percentage values,[ 3 ] so that [3] That is, if the browser supports the value units. So far, Internet Explorer and Netscape support only a meager repertoire of length units - pixels and percents.
background-position: 1cm center
places the image one centimeter to the right of the tag's left edge, centered vertically in the tag's area.
Netscape does not support this CSS property explicitly, but you may achieve similar effects with the general background property. See section Section 9.3.4.6.
9.3.4.5 The background-repeat property Normally, the browser tiles a background image to fill the allotted space, repeating the image both down and to the right. Use the background-repeat property to alter this "repeat" (default value) behavior. To have the image repeat horizontally but not vertically, use the value repeat-x. For only vertical repetition, use repeaty. To suppress tiling altogether, use no-repeat.
A common use of this property is to place a watermark or logo in the background of a page without repeating the image over and over. For instance: BODY {background-image: url(backgrounds/watermark.gif); background-position: center middle;
background-repeat: no-repeat
}
will place the watermark image in the background at the center of the page.
Another popular trick is to create a vertical ribbon down the right-hand side of the page: BODY {background-image: url(backgrounds/ribbon.gif); background-position: top right;
background-repeat: repeaty
}
9.3.4.6 The background property
Like the various font properties, the many background CSS properties can get cumbersome to write and hard to read later. So, like the font property, there also is a general background property.
The background property accepts values from any and all of the background-color , background-image , background-attachment , background-repeat , and background-position properties, in any order. If you do not specify values for some of the properties, that property is explicitly set to its default value. Thus: background: red
sets the background-color property to red and resets the other background properties to their default values. A more complex example:
background: url(backgrounds/marble.gif) blue repeaty fixed center sets all the background image and color properties at once, resulting in a marble image on top of a blue background (blue showing through any transparent areas). The image repeats vertically, starting from the center of the content display area, and does not scroll when the user scrolls the display. Notice that we included just a single position value (center) and the browser used it for both the vertical and horizontal positions.
For many background effects, Netscape supports only the background property and does not honor any of the individual background properties. For this reason, you may want to use the background property to achieve the broadest acceptance of your background image and color properties.
Generally, you'll use the color property with text, but you may also modify non-textual content of a tag.
For example, the following example produces a green horizontal rule: HR {color: green}
If you do not specify a color for an element, it inherits the color of its parent element.
9.3.5 Text Properties
Cascading style sheets make a distinction between font properties, which control the size, style, and appearance of text, and text properties, which control how text is aligned and presented to the user.
9.3.5.1 The letter-spacing property
The letter-spacing property puts additional space between text letters as they are displayed by the browser. Set the property with either a length value or the default keyword normal, indicating that the browser should use normal letter spacing. For example: BLOCKQUOTE {letter-spacing: 2px}
puts an additional two pixels between adjacent letters within the
tag.
This property currently is supported only by Internet Explorer 4.
9.3.5.2 The line-height property
Use the line-height property to define the spacing between lines of a tag's text content. Normally, browsers single-space text lines - the top of the next line is just a few points below the last line. By adding to that line height (more commonly known as leading among typographers), you increase the amount of space between lines.
The line-height value can be an absolute or relative length, a percentage, a scaling factor, or the keyword normal. For example:
P {line-height: 14pt}
P {line-height: 120%}
P {line-height: 2.0}
The first example sets the line height to exactly 14 points between baselines of adjacent lines of text. The second computes the line height to 120 percent of the font size. The last example uses a scaling factor to set the line height to twice as large as the font size, creating double-spaced text. The value normal, the default, is usually equal to a scaling factor of 1.0 to 1.2.
Keep in mind that absolute and percentage values for line-height compute the line height based upon the value of the fontsize property when the line-height property is defined. The computed property value will be inherited by children of the element. Subsequent changes to fontsize by either the parent or child elements will not change the computed line-height.
Scaling factors, on the other hand, defer the line-height computation until the text is actually displayed.
Hence, varying fontsizes affect line-height locally. In general, it is best to use a scaling factor for the line-height property so that the line height will change automatically when the font size is changed.
Although usually considered separate from font properties, you may include this text-related line-height property's value as part of the shorthand notation of the font property. [The font property,
Text justified with respect to the page margins is a rudimentary feature of nearly all text processors. The text-align property brings that capability to HTML for any block-level tag. (The W3C standards people prefer that you use CSS text-align styles rather than the explicit align attribute for those block-level tags like
and
.) Use one of four values: left, right, center, or justify. The default value is, of course, left. For example: DIV {text-align: right}
tells the styles-conscious browser to align all the text inside
tags against the right margin. The justify value tells the browser to align the text to both the left and right margins, spreading the letters and words in the middle to fit.
9.3.5.4 The text-decoration property
The text-decoration property produces all sorts of text embellishments, some of which also are available with the original physical style tags. Its value is one or more of the keywords underline, overline, line-through, and blink. The value none is the default and tells the styles-conscious browser to present text normally.
The text-decoration property is handy for defining different link appearances. For example: A:visited A:link A:active {text-decoration: underline overline}
puts lines above and below the links in your document.
This text property is not inherited, and non-textual elements are not affected by the text-decoration
