Style Sheets Properties Guide
=Color and Background Properties=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Main Index |
Style Sheet Index |
Top Of Tree |
Tag Index |
Tag 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 Tags: 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 Tags: 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 [IE | N4B2]
- Applicable Tags: 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 |
IE | 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 |
IE | 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 [IE | N4B2]
- Applicable Tags: 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 |
IE | 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 |
IE | N4B2 |
No image is used as the background for the element. |
- background-repeat [IE | N4B3]
- Applicable Tags: 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 |
IE | N4B3 |
Image is repeated (tiled) both vertically and horizontally. |
| repeat-x |
explicit |
IE | N4B3 |
Image is repeated (tiled) horizontally only. |
| repeat-y |
explicit |
IE | N4B3 |
Image is repeated (tiled) vertically only. |
| no-repeat |
explicit |
IE | N4B3 |
Image is not repeated. Only a single occurrence of
the background behind the current element is used. |
- background-attachment [IE | N]
- Applicable Tags: 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 |
IE | N |
Background image moves when the browser window is
scrolled to view text outside the current display area. |
| fixed |
explicit |
IE | N |
Background image does not move when the browser window is
scrolled to view text outside the current display area. |
- background-position [IE | N]
- Applicable Tags: 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 |
IE | N |
Percentage is in reference to the dimension of the
current element. |
| [X Y] |
calculated |
IE | N |
Represents absolute coordinate position of the image.
Standard Length Units may be used
here. |
[(left/center/right)
(top/center/bottom)] |
explicit |
IE | 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....