CSS: Background and Foreground colors


The background color never inherits, but the foreground color always inherits. You can specify the color property bu using a set of words in natural language or the RGB notation. Example:

h1 { color : red } /* this is a natural language notation */
h1 { color : #f00 } /* this is a RGB notation */
h1 { color : #ff0000 } /* this is another RGB notation */
h1 { color : rgb(255, 0, 0) } /* this is another RGB notation */
h1 { color : rgb(100%, 0%, 0%) } /* this is another RGB notation */

Pssible values of color maybe: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. However the above notations specify the foreground color property; if you want to specify the background color property, you have to use the keyword background-color. Example:

h1 { background-color : red }

But you can also use an image as a background, by using the keyword background-image. Example:

h1 { background-image : url(your_image.gif) } notice: if your image is located inside of directory where all other pages are located, you can also write so:

h1 { background-image : your_image.gif }

If you specify an image as a background, you can also specify its position inside of the window, by means of the keyword background-position. You can use a percentage value, a length, or these keywords: top, center, bottom, left, center, right. Examples:

body { background-image : image.gif; background-position : 0% 0% }
The above example is the same of this:
body { background-image : image.gif; background-position : top left }

body { background-image : image.gif; background-position : 50% 50% }
The above example is the same of this:
body { background-image : image.gif; background-position : center center }

body { background-image : image.gif; background-position : 50% 50% }
The above example is the same of this:
body { background-image : image.gif; background-position : center }

body { background-image : image.gif; background-position : 100% 100% }
The above example is the same of this:
body { background-image : image.gif; background-position : bottom right }

body { background-image : image.gif; background-position : 100% 100% }
The above example is the same of this:
body { background-image : image.gif; background-position : bottom }

However you can use any intermediate value such as '27% 84%' or '33% 43%'.


Index           Home  Back       About  Contact us!

Copyright (c) 1998-2006 Wowarea