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.
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.
absolute distance from the upper-left corner of the element behind which you display the background image.
TABLE {background-image: url(backgrounds/marble.gif); background-position: 10px 20px}
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%
You'll notice that the browser places the first
marble.gif
tile at the center of the content display area and tiles
to the right and down the window, as shown in Figure 9.2.
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.
9.3.4.7 The color property
The color property sets the foreground color for a tag's contents - the color of the text lettering, for instance. Its value is either the name of a color, a hexadecimal RGB triple, or a decimal rgb triple, as outlined
in section Section 9.3.1.5, "Color property values". Thus, the following are all valid property declarations:
color: mauve
color: #ff7bd5
color: rgb(255, 125, 213)
color: rgb(100%, 49%, 84%)
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,
9.3.3.6]
9.3.5.3 The text-align 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
property.
HTML The Definitive Guide
You must be logged in to Read or Download
CONTINUE
SECURE VERIFIED
