microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Typography on the Web | Specifying... | 5.3 Color and background... next


5.3 Color and background properties

These properties describe the color (often called foreground color) and background of an element (i.e. the surface onto which the content is rendered). One can set a background color and/or a background image. The position of the image, if/how it is repeated, and whether it is fixed or scrolled relative to the canvas can also be set.

The 'color' property inherits normally. The background properties do not inherit, but the parent element's background will shine through by default because of the initial 'transparent' value on 'background-color'.



5.3.1 'color'

Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A
Microsoft® Internet Explorer 3.0 support: partial.

This property describes the text color of an element (often referred to as the foreground color). There are different ways to specify red:

EM { color: red }   
  /* natural language */
EM { color: rgb(255,0,0) }  
  /* RGB range 0-255   */

See section 6.3 for a description of possible color values.

Microsoft Internet Explorer version 3 supports natural language color names and RGB colors specified in hex using #RRGGBB or #RGB.

color: #f00              /* supported by IE3 */
color: #ff0000           /* supported by IE3 */
color: rgb(255,0,0)      /* not supported */
color: rgb(100%, 0%, 0%) /* not supported */
color: red               /* supported by IE3 */



5.3.2 'background-color'

Value: <color> | transparent
Initial: transparent
Applies to: all elements
Inherited: no
Percentage values: N/A
Microsoft Internet Explorer 3.0 support: no.
Some values are supported through the 5.3.7 'background' shorthand property.

This property sets the background color of an element.

H1 { background-color: #F00 }

In Microsoft Internet Explorer version 3 background color should to be specified in the following way.

H1 { background: #F00 }

See 5.3.7 'background' for more details. As with the 'color' property, Microsoft Internet Explorer 3 supports natural language color names and RGB colors specified in hex using #RRGGBB or #RGB.



5.3.3 'background-image'

Value: <url> | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
Microsoft Internet Explorer 3.0 support: no.
Some values are supported through the 5.3.7 'background' shorthand property.

This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.

BODY { background-image: url(marble.gif) }
P { background-image: none }

In Microsoft Internet Explorer version 3 background color should to be specified in the following way.

 BODY { background: url(marble.gif) }

See 5.3.7 'background' for more details.



5.3.4 'background-repeat'

Value: repeat | repeat-x | repeat-y | no-repeat
Initial: repeat
Applies to: all elements
Inherited: no
Percentage values: N/A
Microsoft Internet Explorer 3.0 support: no.
Some values are supported through the 5.3.7 'background' shorthand property.

If a background image is specified, the value of 'background-repeat' determines how/if the image is repeated.

A value of 'repeat' means that the image is repeated both horizontally and vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of 'no-repeat', the image is not repeated.

BODY { 
background: red url(pendant.gif);
background-repeat: repeat-y; }

In the example above, the image will only be repeated vertically.

In Microsoft Internet Explorer version 3 background-repeat should to be specified in the following way.

 BODY { background: repeat-y; }

See 5.3.7 'background' for more details. Microsoft Internet Explorer 3 only supports the repeat property for the BODY selector.



5.3.5 'background-attachment'

Value: scroll | fixed
Initial: scroll
Applies to: all elements
Inherited: no
Percentage values: N/A
Microsoft Internet Explorer 3.0 support: no.
Some values are supported through the 5.3.7 'background' shorthand property.

If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content.

BODY { 
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed; }

CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.

In Microsoft Internet Explorer version 3 background-attachment should to be specified in the following way.

 BODY { background: fixed; }

See 5.3.7 'background' for more details. Microsoft Internet Explorer 3 only supports the attachment property for the BODY selector.



5.3.6 'background-position'

Value: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial: 0% 0%
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to the size of the element itself
Microsoft Internet Explorer 3.0 support: no.

If a background image has been specified, the value of 'background-position' specifies its initial position.

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the element.

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

  • 'top left' and 'left top' both mean the same as '0% 0%'.
  • 'top', 'top center' and 'center top' mean the same as '50% 0%'.
  • 'right top' and 'top right' mean the same as '100% 0%'.
  • 'left', 'left center' and 'center left' mean the same as '0% 50%'.
  • 'center' and 'center center' mean the same as '50% 50%'.
  • 'right', 'right center' and 'center right' mean the same as '100% 50%'.
  • 'bottom left' and 'left bottom' mean the same as '0% 100%'.
  • 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
  • 'bottom right' and 'right bottom' mean the same as '100% 100%'.

examples:

BODY { background: url(banner.jpeg) right top }    
  /* 100%   0% */
BODY { background: url(banner.jpeg) top center }   
  /*  50%   0% */
BODY { background: url(banner.jpeg) center }       
  /*  50%  50% */
BODY { background: url(banner.jpeg) bottom }       
  /*  50% 100% */

If the background image is fixed with regard to the canvas (see the 'background-attachment' property above), the image is placed relative to the canvas instead of the element. E.g.:

BODY { 
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%; } 

In the example above, the image is placed in the lower right corner of the canvas.

In Microsoft Internet Explorer version 3 background-repeat should to be specified in the following way.

BODY { background: top right 
       no-repeat fixed 
       url(watermark.gif); }

See 5.3.7 'background' for more details. Microsoft Internet Explorer 3 only supports the position property for the BODY selector.



5.3.7 'background'

Value: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: allowed on <background-position>
Microsoft Internet Explorer 3.0 support: partial.

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

Possible values on the 'background' properties are the set of all possible values on the individual properties.

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

The 'background' property always sets all the individual background properties. In the first rule of the above example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

The shorthand 'background' property is the only way to specify background attributes within Microsoft Internet Explorer 3. See sections, 5.3.1 to 5.3.6 to see the limitations of each attribute.



Dark blue text is taken from Cascading Style Sheets, level 1. W3C Recommendation 17 December 1996 - http://www.w3.org/pub/WWW/TR/REC-CSS1

this text [ext link] signifies an external link, please read our disclaimer.

this page was last updated 30 June 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Typography on the Web | Specifying... | 5.3 Color and background... next