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'.
|
Value
|
<color> The <color> value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000). Netscape 4.0, Internet Explorer 3.0 Note in Internet Explorer 3.0: This property does not work with form fields Note in Netscape 4.x: This property does not work with form fields, dt, dd, hr, or table elements |
|---|---|
|
Initial
|
User Agent specific |
|
Applies to
|
all elements |
|
Inherited
|
yes |
|
Percentage Values
|
N/A |
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 */
|
| Examples: This line has <font style="color: red">...</font> This line has <font style="color: rgb(255,0,0)">...</font> This line has <font style="color: #FF0000">...</font> This line has <font style="color: #F00">...</font> |
|
Value
|
<color> | transparent The <color> value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000). transparent: The background color is transparent Netscape 4.0, Internet Explorer 4.0
|
|---|---|
|
Initial
|
transparent |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property sets the background color of an element.
EM { background-color: red } /* natural language */
EM { background-color: rgb(255,0,0) } /* RGB range 0-255 */
|
|
Examples: This line has <font style="background-color: yellow">...</font> This line has <font style="background-color: rgb(255,255,0)">...</font> This line has <font style="background-color: #FFFF00">...</font> This line has <font style="background-color: #FF0">...</font> |
|
Value
|
<url> | none <urlr> The path to an image none: No background image Netscape 4.0, Internet Explorer 4.0. Note in IE 4.0: This property does not work with checkboxes, radiobuttons, select/option lists, and hr elements Note in IE 5.0: This property works with checkboxes, radiobuttons, and hr elements Notes in Netscape 4.x: This property does not work with hyperlinks, list items, definition lists, images, horizontal lines, tables, and form fields This property turns inline elements into block elements |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
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 }
|
Examples:
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif)">...</p>
This div has a background image. <div style="background-image: url(image/bgpans.gif)">...</div>
| Examples: This td has a background image. <p style="background-image: url(image/bgpans.gif)">...</p> |
|
Value
|
repeat | repeat-x | repeat-y | no-repeat repeat: The background image will be repeated vertically and horizontally repeat-x: The background image will be repeated horizontally repeat-y: The background image will be repeated vertically no-repeat: The background-image will be displayed only once Netscape 4.0, Internet Explorer 4.0. Notes in IE 4.0:
Note in Netscape 4.0: This property does not work with the body element
|
|---|---|
|
Initial
|
repeat |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
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; } |
Examples:
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif); background-repeat: no-repeat">...</p>
This div has a background image. <div style="background-image: url(image/bgpans.gif); background-repeat: repeat">...</div>
| Examples: This td has a background image. <p style="background-image: url(image/bgpans.gif); background-repeat: repeat-y">...</p> |
Click C3_2_backgroundEx1.htm to see example of background-repeat: repeat.
Click C3_2_backgroundEx2.htm to see example of background-repeat: repeat-x.
Click C3_2_backgroundEx3.htm to see example of background-repeat: repeat-y.
Click C3_2_backgroundEx4.htm to see example of background-repeat: no-repeat.
|
Value
|
scroll | fixed scroll: The background image moves when the rest of the page scrolls fixed: The background image does not move when the rest of the page scrolls. Netscape 6.0, Internet Explorer 4.0. Note in IE 4.x: This property only works with the body element |
|---|---|
|
Initial
|
scroll |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
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; } |
Click C3_2_backgroundEx1.htm to see example of background-attachment: fixed.
Click C3_2_backgroundEx5.htm to see example of background-attachment: scroll.
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'.
|
Value
|
[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right: If you only specify one keyword, the second value will be "center". x% y%: The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. x-pos y-pos: The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions. Netscape 6.0, Internet Explorer 4.0. |
|---|---|
|
Initial
|
0% 0% |
|
Applies to
|
block-level and replaced elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to the size of the element itself |
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:
| BODY { background: 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.
Examples:
This paragragh
has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This paragragh has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: no-repeat; background-position: top right;">...</p>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
This div has a background image. <div style="background-image: url(image/bgpans.gif);
background-repeat: repeat-x; background-position: right right center;">...</div>
| Examples: This td has a background image. <p style="background-image: url(image/bgpans.gif);
background-repeat: repeat-y; background-position: center center;">...</p> |
Click C3_2_backgroundEx6.htm to see example of background-position: 0% 0%.
Click C3_2_backgroundEx7.htm to see example of background-position: 50% 50%.
Click C3_2_backgroundEx8.htm to see example of background-position: 100% 100%.
Click C3_2_backgroundEx9.htm to see example of background-repeat: no-repeat; and background-position: 50.
Click C3_2_backgroundEx10.htm to see example of background-repeat: no-repeat; and background-position: 50px.
|
Value
|
<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> Netscape 6.0, Internet Explorer 4.0. Note in Netscape 4.0 Beta 2: Only "background-color" and "background-image" works in the "background" property
|
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
block-level and replaced elements |
|
Inherited
|
no |
|
Percentage Values
|
allowed on <background-position> |
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 } body |
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 and third rule, all individual properties have been specified.
Click C3_2_backgroundEx11.htm to see example of background-position: BODY background: #FFFF00 no-repeat fixed top url(image/GoldPetals.jpg);.
Click C3_2_backgroundEx12.htm to see example of background-position: P background: #FFFF00 no-repeat fixed top url(image/GoldPetals.jpg); and P CSS inline.