The Background-Color Property


The background-color property sets the background color of an element.

Name:

background-color

Value:

<color> | transparent

Initial:

transparent

Applies to:

all elements

Inherited:

no

Percentages:

N/A


This property has two values:

  • A color

  • The keyword transparent This is the default.

When a color value is provided, the specified color is visible behind the text of the element. How much of the surface actually gets that color depends on the type of element and on the amount of padding. We discussed the effect of padding on color in Chapter 8. It also depends on whether there is a background image in addition to the color, as specified with the background-image property.

Background Color in Inline Elements

For an inline element, color is only visible behind the text itself and behind the padding around an element. Hence, if an element is broken across lines, the background color is visible behind the words and spaces at the end of the first line and behind the words and spaces on the second line. For example, in Figure 10.3, the words in the middle of the sentence are displayed in white on black by putting them in an EM element with color: white and background-color: black. Here is the code to produce this result:

 <STYLE TYPE="text/css">   EM {     background-color: yellow;     color: black   } </STYLE> <BODY>   <P>This paragraph has <EM>a few emphasized   words</EM> in the middle. </BODY> 

Figure 10.3. Use of the background-color property with an inline element.


Background Color in Block Elements

For block-level elements, the color occupies a rectangular region that includes the indent of the first line (if any) of the paragraph and any empty space at the end of each line. It also occupies the padding around the block, if any. In such cases, it is a good idea to add some padding to leave room between the letters and the edge of the background, as has been done in the example shown in Figure 10.4. This figure was generated with the following style sheet set on the middle paragraph:

 P.standout {   background: black;   color: white; } 

Figure 10.4. Use of the color and background properties on a block-level element.


Background Color in List Items

For list item elements, the background is not applied to the label if the label is outside the text box. If the label is inside the text box, the background will be behind the label as well.

The Transparent Value

If no color or image is specified, the background is transparent. In this case, the background of the parent element is visible behind the text (or if that is transparent, the background of the parent's parent is visible, and so on). If all elements have a transparent background, the browser's default background is used (this is often white).

For example, the following code sets the background of certain paragraphs to red and the background of EM elements to yellow. Other elements keep their default transparent background. Figure 10.5 shows how a document with this style sheet may look.

Figure 10.5. Example of transparent and colored backgrounds.


 P.special { background-color: red } EM { background-color: yellow } 

A background is not inherited; if it is not set explicitly, it is transparent, so you often can omit this value. You only need to set it to transparent explicitly if you need to override an earlier rule whether in your style sheet or another's for the background-color or background properties.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

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