{ BACKGROUND-ATTACHMENT : SCROLL | FIXED }

Inherited: No

The BACKGROUND-ATTACHMENT property allows you to choose if the background is fixed or scrolls.

SCROLL

The SCROLL value causes the background image to move along with the foreground text and images as you scroll up or down or right or left.

FIXED

The FIXED value causes the background to remain fixed in place. The foreground text and images move over the fixed background as you scroll up or down or right or left.

Code:
Selector {
BACKGROUND-IMAGE:  URL(anasazi.tif);
BACKGROUND-ATTACHMENT:  SCROLL;
}

Selector {
BACKGROUND-IMAGE:  URL(anasazi.tif);
BACKGROUND-ATTACHMENT:  FIXED;
}

{ BACKGROUND-COLOR : COLOR | TRANSPARENT }

Inherited: No

The BACKGROUND-COLOR property allows you to select the background color. Since, you can assign the BACKGROUND-COLOR to individual elements, you can have more than one background color on a page.

COLOR

The COLOR value can be either the keyword color name, the hex six-digit number (#FFFFFF), or the RGB three-digit value (255,255,255). There are sixteen standard colors in HTML:

TRANSPARENT

The TRANSPARENT value allows the background color to be visible through the foreground images. This is how an area inside any character, such as the white space inside this O, is the same as this white background.

Code:
Selector {BACKGROUND-COLOR:  SILVER}
Selector {BACKGROUND-COLOR:  RGB(223,71,177) }
Selector {BACKGROUND-COLOR:  #98AB6F}
Selector {BACKGROUND-COLOR:  TRANSPARENT}

{ BACKGROUND-IMAGE : URL | NONE }

Inherited: No

The BACKGROUND-IMAGE property allows you to select an image to use as the background.

URL

The URL value is the full path to a named image, or the name of the image. The syntax is demonstrated in the code examples.

NONE

The NONE value is the default. No background image is selected. By declaring NONE, you can ensure that any previous declaration will not effect a specific background.

Code:
Selector {BACKGROUND-IMAGE:  URL(comet.jpg) }
Selector {BACKGROUND-IMAGE:  URL(c:\InetPub\MyPixs\comet.jpg) }
Selector {BACKGROUND-IMAGE:  URL(http://Fred.com/ImageFile/Q.gif) }
Selector {BACKGROUND-IMAGE:  NONE}

{ BACKGROUND-POSITION : [ PERCENTAGE | LENGTH ] |
[ [ TOP | CENTER | BOTTOM ] &| [ LEFT | CENTER | RIGHT ] ] }

Inherited: No

The BACKGROUND-POSITION property allows you to determine the initial position of a background image.

You can use any combination of a PERCENTAGE or a LENGTH. Alternately, you can use one of the keywords [TOP, CENTER, BOTTOM] and/or one of the keywords [LEFT, RIGHT, CENTER] to define the position. You cannot mix the keywords with PERCENTAGE or LENGTH.

[ PERCENTAGE &| LENGTH ]

The PERCENTAGE value is usually listed as a pair of values. Place a blank (white) space between the pair of percents. The first PERCENTAGE in the pair refers to the horizontal axis and the second PERCENTAGE to the vertical axis. 0% 0% is defined as the left top corner and 100% 100% as the right bottom corner. If you only give one PERCENTAGE, it will only set the horizontal axis and the vertical axis is defaulted to 50%.

Other examples of percentage pairs:

The LENGTH value can be in any of the following seven units. Use the abbreviation.

Like the PERCENTAGE pair, you usually use a pair of LENGTH values The first LENGTH in the pair refers to the horizontal axis and the second LENGTH to the vertical axis. The (0,0) position is defined as the top left corner. If you only give one length, it will only set the horizontal axis and the vertical axis is defaulted to 50%.

[ TOP | CENTER | BOTTOM ] &| [ LEFT | CENTER | RIGHT ]

Instead of the LENGTH or the PERCENTAGE values , you can use keyword values to set the position. Again, you usually use a pair of keywords. If you only use one keyword, the second value of the pair is defaulted to CENTER. Note that the order of the pair of keyword values is not important. Thus, TOP CENTER TOP, and TOP CENTER are equivalant and define the same image position. You cannot mix keyword values with PERCENTAGE or LENGTH values.

Code:
Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-POSITION:  35%  80%
}

Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-POSITION:  35%  2.5CM
}

Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-POSITION:  3.25IN
}

Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-POSITION:  TOP  RIGHT
}

( BACKGROUND-REPEAT : REPEAT | REPEAT-X | REPEAT-Y | NO-REPEAT }

Inherited: No

The BACKGROUND-REPEAT property allows you to repeat a background image vertically and/or horizontally. The repetition of an image is called tiling.

REPEAT

The REPEAT value causes the background image to be tiled both vertically and horizontally.

REPEAT-X

The REPEAT-X value causes the background image to be tiled horizontally (along the x-axis).

REPEAT-Y

The REPEAT-Y value causes the background image to be tiled vertically (along the y-axis).

NO-REPEAT

The NO-REPEAT value is the default. No tiling occurs. By declaring NO-REPEAT, you can ensure that any previous declaration will not effect a specific imaged.

Code:
Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-REPEAT:  REPEAT
}

Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-REPEAT:  REPEAT-X
}

Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-REPEAT: REPEAT-Y
}

Selector {
BACKGROUND:  URL(aardvark.gif)
BACKGROUND-REPEAT:  NO-REPEAT
}

( BACKGROUND : BACKGROUND-COLOR &| BACKGROUND-IMAGE &| BACKGROUND-REPEAT &| BACKGROUND-ATTACHMENT &| BACKGROUND-POSITION }

Inherited: No

The BACKGROUND property allows you to declare any or all of the five individual BACKGROUND properties, discussed above, in only one declaration.

Code:
Selector {BACKGROUND:  Red  URL(aardvark.gif)  NO-REPEAT  SCROLL  50% 50%}

Selector {BACKGROUND:  URL(aardvark.gif)  REPEAT-Y}

Selector {BACKGROUND:  URL(aardvark.gif)  TOP}

Selector {BACKGROUND:  Fuchsia}

Copyright 2000 by Infinite Software Solutions, Inc.
Trademark Information