Canvas

The canvas is the content area of the box model.

Background Property

Properties of canvas background.

Background Color Property

The background color of an element is the color of the element canvas. The 'background-color' property or 'background' in short is used to specify the background color of an element. e.g.

{ background-color: blue }
{ background: blue }

'background-color'1,2.1~~last updated 11 Jul 2016~~

to set the background color of an element

Value: <color> | transparent | inherit Initial: transparent Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks: This property sets the background color of an element, either a <color> value or the keyword 'transparent', to make the underlying colors shine through.

Background Image Properties

Background-Image Property

Besides, the background color, the background of an element canvas can also be an image. The 'background-image' property is used to specify the background image of an element. e.g.

{ background-image: url("sideway.gif") }

'background-image'1,2.1~~last updated 11 Jul 2016~~

to set one or more background images of an element

Value: <uri> | none | inherit Initial: none Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: absolute URI or noneRemarks: This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image). Intrinsic dimensions expressed as percentages must be resolved relative to the dimensions of the rectangle that establishes the coordinate system for the 'background-position' property. If the image has one of either an intrinsic width or an intrinsic height and an intrinsic aspect ratio, then the missing dimension is calculated from the given dimension and the ratio. If the image has one of either an intrinsic width or an intrinsic height and no intrinsic aspect ratio, then the missing dimension is assumed to be the size of the rectangle that establishes the coordinate system for the 'background-position' property. If the image has no intrinsic dimensions and has an intrinsic ratio the dimensions must be assumed to be the largest dimensions at that ratio such that neither dimension exceeds the dimensions of the rectangle that establishes the coordinate system for the 'background-position' property. If the image has no intrinsic ratio either, then the dimensions must be assumed to be the rectangle that establishes the coordinate system for the 'background-position' property. Values for this property are either <uri>, to specify the image, or 'none', when no image is used.

Background-Repeat Property

When a background image is used in an element, another properties can be used to declare is the repeating arrangement of the background image. The 'background-repeat' property is used to specify the repeating arrangement of the background image in an element. e.g.

{ background-repeat: repeat-x }

'background-repeat'1,2.1~~last updated 11 Jul 2016~~

to set the background image repeating method of an element

Value: repeat | repeat-x | repeat-y | no-repeat | inherit Initial: repeat Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks: If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box. The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements. Values have the following meanings: <q class="dbl">repeat The image is repeated both horizontally and vertically. repeat-x The image is repeated horizontally only. repeat-y The image is repeated vertically only. no-repeat The image is not repeated: only one copy of the image is drawn. </q>

Background-Attachment Property

When a background image is used in an element, another properties can be used to declare is the scrolling arrangement of the background image. The 'background-attachment' property is used to specify the scrollng arrangement of the background image in an element. e.g.

{ background-attachment: scroll }

'background-attachment'1,2.1~~last updated 11 Jul 2016~~

to set the background-attachment property (fixed or scrolls) of an element with respect to the page

Value: scroll | fixed | inherit Initial: scroll Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks: If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll'). Note that there is only one viewport per view. If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background does not move with the element, and a 'scroll' background does not move with the scrolling mechanism. Even if the image is fixed, it is still only visible when it is in the content, padding or border area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible. In paged media, where there is no viewport, a 'fixed' background is fixed with respect to the page box and is therefore replicated on every page. User agents that do not support 'fixed' backgrounds (for example due to limitations of the hardware platform) should ignore declarations with the keyword 'fixed'. Since the 'background-attachment' property is defined according to the main viewport, the "scroll" background image of an contained element does not move with the element the scrolling mechanism of the element. And a "fixed" background image of the contained element also does not move with the scrolling mechanisms of other containers Both value scroll and fixed can be declared in sequence for those user agents that do not support "fixed background". Besides the positioning of a background-position with "fixed" attachment in a contained element is located relative to the main viewport instead of the contained element location.

Background-Position Property

When a background image is used in an element, another properties can be used to declare is the initial positioning arrangement of the background image. The 'background-position' property is used to specify the initial position of the background image in an element. e.g.

{ background-position: top center }

'background-position'1,2.1~~last updated 11 Jul 2016~~

to set the background image position of an element

Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit Initial: 0% 0% Applies to: allInherited: no Percentages: refer to the size of the box itself Media: visualComputed Value: for <length> the absolute value, otherwise a percentageRemarks: If a background image has been specified, this property specifies its initial position. If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed. <q class="dbl"><percentage> A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. 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 padding box. <length> A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box. top Equivalent to '0%' for the vertical position. right Equivalent to '100%' for the horizontal position. bottom Equivalent to '100%' for the vertical position. left Equivalent to '0%' for the horizontal position. center Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is. </q> However, the position is undefined in CSS 2.1 if the image has an intrinsic ratio, but no intrinsic size. The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements. If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding box.

Background Property

The 'background' property is a shorthand to declare all the background properties of an element by grouping them in one style rule. Although the defining of the background properties is selective in the 'background' property, the 'background' property will first reset all background properties to their initial values. Therefore, all the undefined properties in the 'background properties will be reset to their initial value. e.g.

{ background: blue }
{ background: blue url("sideway.gif") repeat fixed top center }

Foreground Color

The foreground color of an element is the color of text content. The 'color' property is used to specify the color for the text content of an element. e.g.

{ color: blue }

'color'

The 'color' property is used to specify the color for the text content of an element.

value:<color> | inherit Initial:depends on user agent Applies to:all elements Inherited:yes Percentages:N/A Media:visual Computed value:as specified

The 'color' property is an inherited value. Therefore a color property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text.

Border Color

Border color is another color decoration for rendering the box border of an element. Because of its specific rendering characteristic, the property is groupped into the box model styling.

Color & Background Rendering

Color is one of the fundamental properties in visual style rendering. There are mainly two types of color rendering. They are the foreground and background color.

Color Style

There are 17 standard color names in the CSS2 specification with 16 standard HTML 401 color names and one additional orange color.

sRGB value	Color Name	Remark
#000000	black	HTML401
#C0C0C0	silver	HTML401
#808080	gray	HTML401
#FFFFFF	white	HTML401
#800000	maroon	HTML401
#FF0000	red	HTML401
#800080	purple	HTML401
#FF00FF	fuchsia	HTML401
#008000	green	HTML401
#00FF00	lime	HTML401
#808000	olive	HTML401
#FFFF00	yellow	HTML401
#000080	navy	HTML401
#0000FF	blue	HTML401
#008080	teal	HTML401
#00FFFF	aqua	HTML401
#FFA500	orange	CSS2

Color Value

The value of color property in declaration can be specified by

{ color: blue }		/* color name */
{ color: #00F }		/* #rgb */
{ color: #0000FF }	/* #rrggbb */
{ color: rgb(0,0,255) }	/* rgb(d,d,d)  */
{color: rgb(0,0,100%) }	/* rgb(%,%,%)  */

CSS 2.1
- 'CSS-property-name'
- 'CSS-pseudo-class-name'
- 'CSS-value'
- "css-attribute-name"
- css-keyword-value
- <css-basic-data-type>
Modifier Notation:
- ( * ): zero or more;
- ( + ): one or more;
- ( ? ): zero or one times;
- ( ): exactly once
- ( {A,B} ): at least A and at most B times
Grouping:
- ( [] ): grouping
- ( a b c ): all must occur in the given order
- ( | ): one of separated alternatives must occur
- ( || ): two or more of separated alternatives must occur in any order
- ( && ): all separated alternatives must occur in any order