• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 14. Background Properties > background-color Property

14.1. background-color Property

The background-color property sets the background color of an HTML element, and for the most part functions in exactly the same way as the bgcolor attribute associated with the body element under the HTML 4.0 specification.

What makes this property so versatile is that it can be added to virtually any Web element. It can take on any type of CSS color value, ranging from standard name values (such as “green” and “aqua”) to standard hexadecimals (“#ff0000”, which equals red) to rgb color values — in short, any type of color value that the color property can take (see Chapter 13, “Color”). It can also take on a transparent value, which is designed to let the immediate “parent” color show through. It can also take on an inherit value, which adopts whatever parent value may be available. The code depicted in Listing 14.1 shows some examples of how it can be added to many different Web page elements, and is shown in Figure 14-1.

Listing 14.1. background-color Example Code

.demo {background-color: rgb(255,255,255)}
body {font-size: large}
<body style="background-color: rgb(0,0,0)">
<h1 style="background-color: aqua">A Light Blue Header</h1>
<em style="background-color: #ffff00">Italicized text on a yellow
<em style="background-color: green">Text with a green background.
<strong style="background-color: transparent">This should be in 
green too.</strong>
More text with a green background.</em>
<table border="2" cellpadding="5" style="background-color: lime">
<td>A small lime-colored table</td>
<ul style="background-color: yellow">
 <li>List item #1 with a yellow background</li>
 <li style="background-color: #f0f">List item #2 showing cascading
 effect (purple background)</li>
 <li>List item #3 with a yellow background</li>
<span class="demo">Span using a white background</span>


Figure 14-1. background-color example code as depicted in Internet Explorer 6.0.

Browser Compatibility

This property has been widely adopted, and works properly in all but the earliest browsers.

  • Internet Explorer 3.0: Unsafe

  • Internet Explorer 4.0: Safe

  • Internet Explorer 4.0 – 4.5 (Mac): Safe

  • Internet Explorer 5.0: Safe

  • Internet Explorer 5.1 – 5.2 (Mac): Safe

  • Internet Explorer 5.5: Safe

  • Internet Explorer 6.0: Safe

  • Netscape Navigator 4.0 – 4.79: Partial. All values supported with the exception of transparent.

  • Netscape Navigator 4.0 (Mac & UNIX): Partial. Ditto above.

  • Netscape Navigator 6.0-7.0: Safe. Note that it also sets a background color for spaces leading up to individual list elements. This is within the range of interpretation for the specification. See Figure 14-2 for an example of this behavior.

    Figure 14-2. background-color example code as depicted in Netscape Navigator 6.0; note the difference in the way the background color is applied to the ul element.

  • Netscape Navigator 7.0: Safe. Ditto above.

  • Mozilla 1.0: Safe, though displays same behavior as Netscape Navigator 6.0 when it comes to individual list elements.

  • Opera 3.6 – 4.0: Safe.

  • Opera 5.0 – 6.0: Safe.

  • Konqueror: Safe.

Internet Explorer beginning with version 4.0 fully supports background-color.

Netscape Navigator began implementing this feature beginning with version 4.x, but its results have been problematic. The 4.x version of this browser is rated Partial since it does not implement the transparent value which is supposed to let the underlying color “show through.” In Figure 14-1 (which uses Internet Explorer 6.0), the code that uses transparent is displayed as black (the color set to the body element) instead of the green value (set to the em element, its immediate parent element) that should be displayed instead. Netscape Navigator 6.0 and 7.0 as well as Mozilla 1.0 remedy this problem, though it should be noted that the color value is added to ul and ol elements when present, a behavior which does not occur in any other browser, though this is within the range of interpretation for the specification. See Figure 14-2 for an example of this behavior.

Opera began implementing the background-color property beginning with version 3.6.

Konqueror also implements this property.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint