Color and Background Properties

< Day Day Up >

CSS1 supports a variety of properties that can be used to control the colors and backgrounds in a document. With style sheets, you can create arbitrary regions with different background colors and images. In the past, such designs were difficult to accomplish without turning to tables or proprietary HTML extensions.

CSS1 style sheets support three basic forms of color specifications:

Color names The suggested keyword colors supported by browsers are a set of 16 color names taken from the Windows VGA palette. The colors include Aqua , Black , Blue , Fuchsia , Gray , Green , Lime , Maroon , Navy , Olive , Purple , Red , Silver , Teal , White , and Yellow . These are the same predefined colors from the XHTML specification.
Hexadecimal values Supports the standard, six-digit color form #RRGGBB as used with the font and body elements. A shortened , three-digit color form, in which R, G, and B are hex digits, also is supported under CSS1. For example, #F00 would represent red. This three-hex color format is less expressive in the range of color it can represent and some older CSS browsers do not support it; thus, its use isn't recommended.
RGB values The RGB format also is specified in the form rgb(R,G,B) , whereby the values for R, G, and B range from 0 to 255. This format should be very familiar to users of graphics programs such as Adobe Photoshop. Older CSS-aware browsers don't support the rgb(R,G,B) color format, so use it with caution. However, given this new color measurement, in the future we may find hex values for color a thing of the past.

color

CSS supports the color property, which is used to set the text color. Its use is illustrated in the following examples:

 body       {color: green;} h1         {color: #FF0088;} .fun       {color: #0f0;} #test      {color: rgb(0,255,0);}

background-color

The background-color property sets an element's background color. The default value is none , which allows any underlying content to show through. This state also is specified by the keyword transparent . The background-color property often is used in conjunction with the color property that sets text color. With block elements, background-color colors content and padding, the space between an element's contents and its margins. With inline elements, background-color colors a box that wraps with the element if it occurs over multiple lines. This property takes colors in the same format as the color property. A few example rules are shown here:

 p        {background-color: yellow;} body     {background-color: #0000FF;} .fun     {background-color: #F00;} #test    {background-color: rgb(0,0,0);}

The second example is particularly interesting because it sets the background color for the entire document. Given this capability, the bgcolor attribute for the body element isn't needed.

background-image

The background-image property associates a background image with an element. If the image contains transparent regions, underlying content shows through. To prevent this, designers often use the background-image property in conjunction with the background- color property. The color is rendered beneath the image and provides an opaque background. The background-image property requires a URL to select the appropriate image to use as a background within a special url( ) indicator. Background images are limited to whatever image format that the browser supports, generally GIF and JPEG, but increasingly PNG as well. A few examples are shown here, including one that suggests how background colors might show through a transparent hole in a background-image tile.

 #krispy     {background-image: url(/books/4/324/1/html/2/donut-tile.gif);              background-color: white;} body        {background-image: url(/books/4/324/1/html/2/funtile.gif);} b           {background-image: url(/books/4/324/1/html/2/brick.gif);} div.prison  {background-image: url(/books/4/324/1/html/2/bars.gif);}

Notice that you can set a background for an inline element, such as b , just as easily as you can for larger structures or the whole document, as specified by the body element selector.

background-repeat

The background-repeat property determines how background images tile in cases where they are smaller than the canvas space used by their associated elements. The default value is repeat , which causes the image to tile in both the horizontal and vertical directions. A value of repeat-x for the property limits tiling to the horizontal dimension. The repeat-y value behaves similarly for the vertical dimension. The no-repeat value prevents the image from tiling.

 p         {background-image: url(/books/4/324/1/html/2/donut-tile.gif);            background-repeat: repeat-x;} .tileup   {background-image: url(/books/4/324/1/html/2/tile.gif);            background-repeat: repeat-y;} body      {background-image: url(/books/4/324/1/html/2/tile.gif);            background-repeat: no-repeat;}

Note

By using the background-repeat property, you can avoid some of the undesirable tiling effects from HTML-based backgrounds. As discussed in Chapter 6, designers often must resort to making very wide or tall background tiles so that users won't notice the repeat. Because the direction of repeat can be controlled, designers can now use much smaller background tiles.

One unresolved issue with a nonrepeating tile is what happens when the user scrolls the screen: should the background be fixed or scroll offscreen ? It turns out that this behavior is specified by the next property, background-attachment .

background-attachment

The background-attachment property determines whether a background image should scroll as the element content with which it is associated scrolls, or whether the image should stay fixed on the screen while the content scrolls. The default value is scroll . The alternate value, fixed , can implement a watermark effect, similar to the proprietary attribute bgproperties to the body element that was introduced by Microsoft. An example of how this can be used is shown here:

 body   {background-image:url(/books/4/324/1/html/2/logo.gif);background-attachment: fixed;}

background-position

The background-position property specifies how a background image ¾ not a color ¾ is positioned within the canvas space used by its element. There are three ways to specify a position:

The top-left corner of the image can be specified as an absolute distance; usually in pixels from the origin of the enclosing element.
The position can be specified as a percentage along the horizontal and vertical dimensions.
The position can be specified with keywords to describe the horizontal and vertical dimensions. The keywords for the horizontal dimension are left , center , and right . The keywords for the vertical dimension are top , center , and bottom . When keywords are used, the default for an unspecified dimension is assumed to be center .

The first example shows how to specify the top-left corner of the background by using an absolute distance 10 pixels from the left and 10 pixels from the enclosing element's origin:

 p  {background-image: url(/books/4/324/1/html/2/picture.gif); background-position: 10px 10px;}

Note that this distance is relative to the element's position and not to the document as a whole, unless, of course, the property is being set for the body element. If you are a little confused about positioning, don't worry because you will see much more of it in the next chapter. For now let's look at a few more examples. This example shows how to specify a background image position by using percentage values along the horizontal and vertical dimensions:

 body  {background-image:url(/books/4/324/1/html/2/picture.gif);background-position: 20% 40%;}

If you forget to specify one percentage value, the other value is assumed to be 50% .

Specifying an image position by using keywords is an easy way to do simple placement of an image. When you set a value, the keyword pairs have the following meanings:

Keyword Pair	Horizontal Position	Vertical Position
top left	0%	0%
top center	50%	0%
top right	100%	0%
center left	0%	50%
center center	50%	50%
center right	100%	50%
bottom left	0%	100%
bottom center	50%	100%
bottom right	100%	100%

An example of using keywords to position a background image is shown here:

 body   {background-image: url(/books/4/324/1/html/2/picture.gif);         background-position: center center;}

Note that if only one keyword is set, the second keyword defaults to center . Thus, in the preceding example, the keyword center was needed only once.

background

The background property is a comprehensive property that allows any or all of the specific background properties to be set at once, not unlike the shorthand font property. Property order does not matter. Any property not specified uses the default value. A few examples are shown here:

 p         {background: white url(/books/4/324/1/html/2/picture.gif) repeat-y center;} body      {background: url(/books/4/324/1/html/2/tile.jpg) top center fixed;} .bricks   {background: repeat-y top top url(/books/4/324/1/html/2/bricks.gif);}

The following is a complete example of all the background properties :

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  CSS Background Attributes Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--  body   {background-color: green;}  p      {background: yellow url(/books/4/324/1/html/2/flag.gif) repeat-y fixed 100px;}  .red   {background-color: red;} -->  </style>   </head>   <body>   <p>  This is a paragraph of text. The left side will probably be hard to  read because it is on top of an image that repeats along the  y-axis. Notice that the area not covered by the background image is  filled with the background color.  <span class="red">  Backgrounds anywhere!  </span>  This is more text just to illustrate the idea. This is even more text. This is more text just to illustrate the idea. This is even more text. This is more text just to illustrate the idea. This is even more text. This is more text just to  illustrate the idea. This is even more text. This is more text just to illustrate  the idea. This is even more text  .</p>   </body>   </html>

Notice that multiple background types with a variety of elements can be included. A similar layout is possible under pure HTML, but the required table element would be somewhat complicated. A rendering of the background style sheet example is shown in Figure 10-8.

Figure 10-8: Rendering of background properties

< Day Day Up >