Style Sheets Properties Guide
=Color and Background Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

color | background | background-color | background-image
background-repeat | background-attachment | background-position
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Style Sheet Color and Background properties allow color control of both foreground and background regions within elements. These properties also allow powerful options for placement of images within HTML elements. Some of the functionality possible with these properties has been available through HTML to this point, but the extra degree of control now possible with these properties is far greater than anything ever seen in HTML to date.

NOTE: The [background-color], [background-image], [background-repeat], [background-attachment] and [background-position] values are recent additions to the official spec that appeared after Internet Explorer 3 was released.


color [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <body TEXT="#RRGGBB"> | <font COLOR="#RRGGBB">
Inherit From Parent: Yes
Default Value: Browser dependent
What Is It?
This property describes the color of text within an element. Values for the property outside the specified ranges will be clipped or truncated to create a valid value.
Example
Ext/Doc: body { color: blue }
In-Line:  <body STYLE="color: blue">text</body>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[color] explicit IE3B1 | N4B2 This is a representation of the values for Red/Green/Blue used to determine a final display color. Please see the section on Color Units for details on the various color specification schemes.


background [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <body BGCOLOR="#RRGGBB" BACKGROUND="URL" BGPROPERTIES="fixed"> | <table|tr|th|td BACKGROUND="URL">
Inherit From Parent: No
Default Value: NA
What Is It?
This is a shorthand property notation for specifying information about how to display the background surface onto which content (images, text, etc.) is rendered. Backgrounds can be colors and/or images. If an image is specified, many choices are available to specify display behavior. Both a background color and image can be specified in the same property definition, but it is not required to have both. If URL behavior properties are listed without an accompanying URL, the values will be ignored. Although this property does not inherit, a parent element's background will shine through because of the default 'transparent' background-color value in the children elements. The background property is one of several shorthand properties that specify values controlling many aspects of display behavior.
Usage:
Selector { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] }
Example
Ext/Doc: body { background: white url(http://www.foo.com/image.gif) repeat-x fixed top right}
In-Line:  <body STYLE="background: white url(http://www.foo.com/image.gif) repeat-x fixed top right">test text in the body</body>
Browser Notes
- Netscape 4 Beta 2 This version supports 'background-color' and 'background-image' properties only for the shorthand 'background' property.
- Netscape 4 Beta 3 This version adds 'background-repeat' to the properties supported for the shorthand 'background' property.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[background-color] NA IE3B1 | N4B2 See the individual property for details on syntax and allowed values.
[background-image] NA IE3B1 | N4B2 See the individual property for details on syntax and allowed values.
[background-repeat] NA IE3 | N4B3 See the individual property for details on syntax and allowed values.
[background-attachment] NA IE3 | N See the individual property for details on syntax and allowed values.
[background-position] NA IE3 | N See the individual property for details on syntax and allowed values.


background-color [ IE4B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <body BGCOLOR="#RRGGBB">
Inherit From Parent: No
Default Value: transparent
What Is It?
This value sets the background color for the current element. A 'background-color' can be specified either alone or in conjunction with a 'background-image'. When used with a background image, it can still serve several purposes: 1) to fill transparent regions of the background image, 2) for display while the background image is loading, 3) the browser has image loading capability turned off, and 4) if the background image display settings will not cover all of the browser display area. All the standard Color Units specification methods apply here.
Example
Ext/Doc: body { background-color: blue }
In-Line:  <body STYLE="background-color: blue">text</body>
Browser Notes
- Netscape 4 Beta 2 Using a value of 'transparent' shades an element a little darker than the parent element color.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[color] explicit IE4B1 | N4B2 This is a representation of the values for Red/Green/Blue used to determine a final display color. Please see the section on Color Units for details on the various color specification schemes.
transparent explicit IE4B2 | N4B2 This specifies that the parent element background/image will shine through if one exists, else the system default background/image value is used.


background-image [ IE4B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <body BACKGROUND="URL">
Inherit From Parent: No
Default Value: none
What Is It?
This value indicates the URL source for the graphic. If this property is present, 'background-repeat', 'background-attachment' and 'background-position' properties can also be specified. If a color value is not also specified, areas not covered by the image will be transparent.
Example
Ext/Doc: body { background-image: url(http://www.foo.com/image.gif) }
In-Line:  <body STYLE="background-image: url(http://www.foo.com/image.gif)">text</body>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[URL Location] user
specified		 IE4B1 | N4B2 It can be either an absolute or relative URL. Please see the section on URL Units for details on how to indicate a URL within a Style Sheet.
none explicit IE4B1 | N4B2 No image is used as the background for the element.


background-repeat [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: repeat
What Is It?
If a 'background-image' is specified, this value specifies how the image is repeated if the image is not large enough to cover the entire element.
Example
Ext/Doc: body { background-image: url(http://www.foo.com/image.gif); background-repeat: repeat-y }
In-Line:  <body STYLE="background-image: url(http://www.foo.com/image.gif); background-repeat: repeat-y">text</body>
- Netscape 4 Beta 3 'Background-repeat' can not be specified yet for the BODY element.
Allowed
Values
 Value
Type
 Browser
Support
 Description
repeat explicit IE4B2 | N4B3 Image is repeated (tiled) both vertically and horizontally.
repeat-x explicit IE4B2 | N4B3 Image is repeated (tiled) horizontally only.
repeat-y explicit IE4B2 | N4B3 Image is repeated (tiled) vertically only.
no-repeat explicit IE4B2 | N4B3 Image is not repeated. Only a single occurrence of the background behind the current element is used.


background-attachment [ IE4B2 | N ]
Applicable Elements: ALL
HTML Equivalent: <body BACKGROUND="URL" BGPROPERTIES="fixed">
Inherit From Parent: No
Default Value: scroll
What Is It?
If a 'background-image' is specified, this value indicates whether or not the background image will move when the browser window is scrolled to view text outside the current display area.
Example
Ext/Doc: body { background-image: url(http://www.foo.com/image.gif); background-attachment: fixed }
In-Line:  <body STYLE="background-image: url(http://www.foo.com/image.gif); background-attachment: fixed">text</body>
Allowed
Values
 Value
Type
 Browser
Support
 Description
scroll explicit IE4B2 | N Background image moves when the browser window is scrolled to view text outside the current display area.
fixed explicit IE4B2 | N Background image does not move when the browser window is scrolled to view text outside the current display area.


background-position [ IE4B2 | N ]
Applicable Elements: Block level and replaced elements.
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0% 0%
What Is It?
If a 'background-image' is specified, this complex parameter details the initial position of the background image specified in the browser window if it is not continuously tiled in the display area. The values for this property translate to space separated X/Y coordinates of the browser window. Minimum values are at the upper-left corner of the display area and maximum values are at the lower-right corner. These values are normally represented as a pair, but omitting a value is legal - the missing value is set to the default 'center' value.
Example
Ext/Doc: body { background-image: url(http://www.foo.com/image.gif); background-position: top center }
In-Line:  <body STYLE="background-image: url(http://www.foo.com/image.gif); background-position: top center">text</body>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[X% Y%] calculated IE4B2 | N Percentage is in reference to the dimension of the current element.
[X Y] calculated IE4B2 | N Represents absolute coordinate position of the image. Standard Length Units may be used here.
[(left/center/right)
(top/center/bottom)]		 explicit IE4B2 | N Keywords representing screen positions. Left keyword is the X-position and the right keyword is the Y-position for the image.


Boring Copyright Stuff....