Setting Multiple Background Values

As discussed in the previous sections, CSS lets you define the background color and graphic for any individual element on the page, giving you much greater versatility when it comes to designing your Web pages.

The background shorthand property (Table 5.8) also allows you to define the background image and color for an entire page or single element by rolling these into a single quick and compressed declaration. From a coding standpoint, this method is better because it takes up less space, but requires that you remember what each of the values in the list is for.

Table 5.8. Background Values




IE3, FF1, S1, O3.5, CSS1


IE3, FF1, S1, O3.5, CSS1


IE3, FF1, S1, O3.5, CSS1


IE4, FF1, S1, O3.5, CSS1


IE3, FF1, S1, O3.5, CSS1

In this example (Figure 5.9), the background image of the lizard popping out of the chimney has been placed in the top right corner of the page and will stay fixed even when the page scrolls (Figure 5.10). In addition, the level 2 heading has a textured area created using a background image (Figure 5.11) set to repeat vertically (Code 5.4).

Figure 5.9. The background image for the page (the lizard, bill) appears to the extreme right of the page.

Figure 5.10. Although the text has scrolled down, the body's background (poor Bill the lizard) image stays frozen in place.

Figure 5.11. The chapter title heading has its own distinctive background that draws attention: a rough texture that repeats only on the left side and is flat gray in the rest.

Code 5.4. In this code, a background image is defined for the body of the page. This image is instructed not to repeat, to be fixed, and is positioned up and to the left using negative values. The h2 tag has also been defined with a rough background graphic that is repeated only across the left side of the element. Padding is included on the left for the heading so that the chapter title does not overlap the rough area.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Background</title> <style type="text/css" media="screen"><!-- body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif;      color: black;      background: white url(alice13a.gif) no-repeat fixed right top;      width: 60%; } h2 {      color: white;      background: #999999 url(background_rough.gif) repeat-y left top;      padding: 35px; } input.formText {      background: #fcc;      color: red; } input.formButton {      background: #333 url(gell_red.png) repeat-x scroll;      color: white; } --></style>      </head>      <body>         <div >      <h1>Alice's Adventures in Wonderland</h1> <form action="#" method="get" >      Search Book:      <input  type="text" name="searchTerm" size="24" />      <input  type="submit" name="findSearchTerm" value="Find" /> </form>      <p >Lewis Carroll</p>      <h2>CHAPTER IV<br />         <span >The Rabbit Sends in a Little Bill</span></h2> </div> <p>It was the White Rabbit, trotting slowly back again, and looking anxiously about as it  went, as if it had lost something; and she heard it muttering to itself 'The Duchess! The  Duchess! Oh my dear paws! Oh my fur and whiskers! </p> </body> </html>

To define the background:



Start your declaration by typing the background property name, followed by a colon (:). Then define a background value.



Type a value for the color you want the background to be, followed by a space. This value can be the name of the color or an RGB value. See "Values and Units Used in this Book" in the Introduction for more details.

Alternatively, you could type transparent, which tells the browser to use the background color of elements behind this element.



Type url() with a URL for the location of the background image in the parenthesis (Table 5.4), followed by a space. This location is the image file (GIF, JPEG, or PNG) that you want to use as the background and is either a complete Web address or a local filename.

Alternatively, you can type none instead of a URL, which instructs the browser not to use a background image.



Type a value for how you want your background to repeat, followed by a space. Use one of the following options (Table 5.5):

  • repeat instructs the browser to tile the graphic throughout the background of the element both horizontally and vertically.

  • repeat-x instructs the browser to tile the background graphic only horizontally. In other words, the graphic repeats in one straight horizontal line along the top of the element.

  • repeat-y instructs the browser to tile the background graphic only vertically. In other words, the graphic repeats in one straight vertical line along the left side of the element.

  • no-repeat causes the background graphic to appear only once and not tile.



Type a keyword for how you want the background attachedhow it should be treated when the page scrollsfollowed by a space. Use one of the following options (Table 5.6):

  • scroll instructs the background graphic to scroll with the element.

  • fixed instructs the browser not to scroll the background content with the rest of the element.


right top;

Type two values, separated by a space, to specify where you want the background positioned in relation to the top-left corner of the element. Use one of the following values (Table 5.7):

  • A length value, such as -10px. The values can be positive or negative. The first number tells the browser the distance the element should appear from the left edge of its parent; the second value specifies the position from the top edge of the parent.

  • A percentage value, such as 25%. The first percentage indicates the horizontal position proportional to the parent element's size; the second value indicates the vertical position proportional to the parent element's size.

  • A position keyword, such as top, bottom, left, right, or center.


  • The ability to place graphics behind any element on the screen is a very powerful tool for designing Web pages; it frees you from the constraints of having to create new graphics whenever text changes. You can combine the versatility of HTML text with graphics to create stunning effects.

  • The default state for an element's background is none, so the parent element's background image and/or color will show through unless the background color or background image for that particular child element is set.

  • A fixed background can be particularly effective if you're using a graphic background in your layout to help define the layout grid.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: