CSSDe Myst Backgrounds

From CSS Discuss

Jump to: navigation, search

Contents

CSS De Mystified

Color and Backgrounds

color

The value of color is supposed to set the foreground color of the element. In other words it most often sets the text color. Some other color properties are defaulting to the value of color, so it might affect other colors than that of the text.

It is supported in all CSS enabled browsers. Some browsers wrongly allow color values to be quoted. The system colors set of color names specified in CSS2 has less support, but still has wide support. The X11 color names are also supported by most browsers.

<color>

Specifies a color value.

/* All the rules below are equivalent */
body {color: rgb(255,0,0);}
body {color: rgb(100%,0%,0%);}
body {color: #ff0000;}
body {color: #f00;}
body (color: red;)

inherit

A value of inherit makes the property inherit the computed value of the parent element.

body {color: red;}
div {color: blue;}
body>div {color: inherit;} /* div elements that are direct children of body 
                              will inherit the color of the body 
                              instead of being colored blue */

inherit is supported by almost all browsers, even though it is not specified in CSS1. It is in fact the default value.

background-color

The value of background-color is supposed to set the background color of the content box of element.

It is supported in all CSS enabled browsers. Some browsers wrongly allow color values to be quoted. The system colors set of color names specified in CSS2 has less support, but still has wide support. The X11 color names are also supported by most browsers.

<color>

/* All the rules below are equivalent */
html {background-color: rgb(0,0,0);}
html {background-color: rgb(0%,0%,0%);}
html {background-color: #000000;}
html {background-color: #000;}
html (background-color: black;)

transparent

html {background-color: #000;}
body {background-color: transparent;} /* body elements have a transparent background, 
                                         so the html background color will shine through */

The value of transparent is supported by almost all browsers, and is the default value.

inherit

html {background-color: #000;}
body {background-color: #999;}
html>body {background-color: inherit;} /* body elements that are direct children of html 
                                          will inherit the color of the html 
                                          instead of being colored gray */

The value of inherit is supported by almost all browsers, even though it is not specified in CSS1.

background-image

The value of background-image is supposed to set an image to render above the background color of the element.

It is supported in all CSS enabled browsers. Some browsers wrongly allow color values to be quoted. The system colors set of color names specified in CSS2 has less support, but still has wide support. The X11 color names are also supported by most browsers.

<url> or <uri>

Specifies the uri of an image to apply as background, above the background color. If the uri is relative, it should be expanded to an absolute uri based on the uri of the stylesheet, not the containing document, when these are separate.

html {background-image: url("http://example.com/image");}

Some browsers resolve the uri relative to the containing document.

none

div {background-image: url(http://example.com/image);}
div#noimage {background-image: none;} /* this div will not contain the background image */

The value of none is supported by all browsers, and is the default value.

inherit

Makes the element inherit the background image from the parent element.

body {background-image: url(http://example.com/image);}
* {background-image: inherit;}

The value of inherit is supported by almost all browsers, even though it is not specified in CSS1.

background-repeat

...

background-attachment

...

background-position

...

background

...

Browsers Support

...

Personal tools