Setting a Background Image


Beyond simply setting a background-image that tiles behind an element, CSS offers you great flexibility in the exact placement of the background behind the element using several different properties:

  • Repeat. Whether the image tiles, only appears once, or repeats only horizontally or vertically.

  • Attachment. Whether the image scrolls with the rest of the page or stays in one place.

  • Position. Moves the image to the left and down (positive values) or to the right and up (negative values) from the top-left corner of the parent element.

In this example, a background image of a stretched Alice (Figure 5.4 and 5.5) is fixed to the top-left corner (Figure 5.6). In addition, the level 2 heading is given an extra flourish (Figure 5.7) with a background that repeats across the top and a background for form buttons (Figure 5.8) that creates a glossy plastic effect.

Figure 5.4. The background image (Alice) appears on the left side of the screen, and the text has been pushed over to the right.


Figure 5.5. The actual image used in the background is relatively small, since we use the background color (white) to fill in the background behind the rest of the page.


Figure 5.6. Although the text has scrolled, the background image for the page (the telescoping Alice) stays in the same place.


Figure 5.7. The level 2 heading also uses a flourish background image to add an attractive rule above the chapter title.


Figure 5.8. The background image for form buttons. When repeated horizontally, it produces a glossy look.


To define a background image:

1.

background-image: url(alice05.gif);


Type the background-image property name, followed by a colon (:), url(), and a URL in the parenthesis for the location of the image file (GIF, JPEG, or PNG) that you want to use as the background. It can be either a complete Web address or a local filename (Code 5.3).

Code 5.3. This code sets backgrounds for the page, level 2 headings, and the form fields.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting a Background Image</title>      <style type="text/css" media="screen"><!-- body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif;      color: black;      background-image: url(alice05.gif);      background-color: white;      background-repeat: no-repeat;      background-attachment: fixed;      background-position: -10px 10px;      margin-left: 200px; } h2 {      background-image: url(bg_flourish.png);      background-repeat: repeat-x;      background-attachment: scroll;      background-position: -15px 0px;      padding-top: 75px; } input {      background-image: url(gell_red.png);      background-repeat: repeat-x;      background-attachment: 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 III<br />         <span >A Caucus-Race and a Long Tale</span></h2> </div> <p>They were indeed a queer-looking party that assembled on the bank--the birds with  draggled feathers, the animals with their fur clinging close to them, and all dripping wet , cross, and uncomfortable.</p> </body> </html>

Alternatively, you can type none instead of url() and a path to instruct the browser not to use a background image (Table 5.4).

Table 5.4. Background-Image Values

VALUE

COMPATIBILITY

<url>

IE4, FF1, S1, O3.5, CSS1

none

IE4, FF1, S1, O3.5, CSS1


2.

background-repeat: no-repeat;


Type the background-repeat property name, followed by a colon (:), and then define how you want your background to repeat by typing one of the following options (Table 5.5):

  • repeat instructs the browser to tile the graphic throughout the background of the element horizontally and vertically. This is the default value if the property is left out.

  • repeat-x instructs the browser to tile the background graphic only horizontally, so 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, so 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.

Table 5.5. Background-Repeat Values

VALUE

COMPATIBILITY

repeat

IE4, FF1, S1, O3.5, CSS1

repeat-x

IE4, FF1, S1, O3.5, CSS1

repeat-y

IE4, FF1, S1, O3.5, CSS1

no-repeat

IE4, FF1, S1, O3.5, CSS1


3.

background-attachment: fixed;


Type the background-attachment property name, followed by a colon (:), and then define how you want the background to be treated when the page scrolls by typing one of the following options (Table 5.6):

  • scroll instructs the background graphic to scroll with the element. This is the default value if the property is left out.

  • fixed instructs the browser not to scroll the background content with the rest of the element. However, it will scroll with parent elements.

Table 5.6. Background-Attachment Values

VALUE

COMPATIBILITY

scroll

IE4, FF1, S1, O3.5, CSS1

fixed

IE4, FF1, S1, O3.5, CSS1


4.

background-position: -10px 10px;


Type the background-position property name, followed by a colon (:). Then type two values (x and y) separated by a space, to indicate where you want the background to appear in relation to the top-left corner of the element. Use one of the following values (Table 5.7):

  • Length values, 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. See "Values and Units Used in this Book" in the Introduction for more details.

  • Percentage values, 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.

  • Keywords in plain English: top, bottom, left, right, or center.

Table 5.7. Background-Position Values

VALUE

COMPATIBILITY

<length>

IE4, FF1, S1, O3.5, CSS1

<percentage>

IE4, FF1, S1, O3.5, CSS1

top

IE4, FF1, S1, O3.5, CSS1

bottom

IE4, FF1, S1, O3.5, CSS1

left

IE4, FF1, S1, O3.5, CSS1

right

IE4, FF1, S1, O3.5, CSS1

center

IE4, FF1, S1, O3.5, CSS1


Tips

  • A repeating background can sometimes be really annoying. It may repeat where it's not wanted, or you may want it to tile in only one direction. CSS gives you supreme control of how background graphics appear through the background-repeat property.

  • You can mix percentage and length values in the same background-position declaration, but you cannot mix length or percentages with plain-English keywords.

  • Any background space that does not have a background graphic will be filled with the background color, so I recommend always specifying a background color with a background image.

  • Background images can be a deceptively powerful tool for Web design, two of the most useful of which are CSS Sprites, discussed in Chapter 20.





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

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