Color and Background property of CSS Style sheet properties | what is color and background property of css - Online Help

Color and background property in CSS:

CSS allows us to control the color and background of the web pages. For background and color, It contains six different properties and also we can make a single declaration of all properties by using shorthand property called"background".

The six-color and background properties are as follow:

- background-color

- background-image

- background-repeat

- background-attachment

- background-position

- background

Three levels of collections of color might be used by an HTML document. The smallest useful set of colors includes only those that have a standard name and are guaranteed to be correctly displayable by all browsers on all color monitors. This collection of 17 colors is called the named "color".

COLOR NAMES	HEXADECIMAL VALUES	COLOR NAMES	HEXADECIMAL VALUES
Aqua	00ffff	Olive	808000
Black	000000	Orange	ffa500
Blue	0000ff	Red	ff0000
Fuchsia	ff00ff	Purple	800080
Grey	808080	Silver	c0c0c0
Green	008000	Teal	008080
Lime	00ff00	White	ffffff
maroon	800000	Yellow	ffff00
Navy	000080

Color Property:

The color property is used to specify the foreground color of HTML elements.The general form is
selector{color:#color value/color name;}

Example
body{color:red;}
H1{color:#FFA500;}

Background property in CSS:

Background-color:

The background-color property sets the background color of an element. The general form is
selector{background-color:#color value/color name;}

Example
body{background-color:white;}
h1{background-color:#000080;}

The value transparent indicates that whatever is behind the element can be seen.

Also read: CSStext properties

Background-image:

The Background-image property sets the background image of an element.

The general form is:

selector{background-image:url /image filename;}

Example:
body{background-image:url("/image/monkey.gif")}
p{background-image:url("http://www.cclrc.com/pretty.png")}
h1{background-image:none}

Background-Repeat:

If we do not want our image to repeat all over the background of the box, we should use the background-repeat property, which has four helpful values:

VALUE	PURPOSE
repeat	This causes the image to repeat to cover the whole page.(it is default therefore rarely used)
repeat-x	The image will be repeated horizontally across the page(not down the whole page vertically)
repeat-y	The image will be repeated vertically down the page(not down the whole page vertically)
no-repeat	The image is displayed only once

The general form is

Selector{background-repeat:repeat type;}

where

repeat type-repeat,repeat-x,repeat-y,no-repeat

Example:
body{background-image:url(/image/flower.gif);}
body{background-repeat:repeat-x;}
In the above example, the flower will only be tiled horizontally.

Background-attachment:

When we specify a background image we can use the background-attachment property to specify whether the image is fixed in its position, or whether it moves as the user scrolls up and down the page.

The general form is,

selector{background-attachment:value;}

where

value-either scroll or fixed


Example

body{background-image:url("flower.jpg");}
body{background-attachment:fixed;}

Background-position:

The background-position property is used to set the initial position of the background image. This can be made to spread the entire element area by using the background-repeat property.

The initial position can be specified by using any one of the following:

• By specifying the top left corner of the image by using pixels.
• By specifying the percentage along horizontal and vertical dimensions.
• By specifying the horizontal and vertical dimensions using keywords. The keywords are:

Horizontal dimension - left,center,and right.

Vertical dimension - top, center, and bottom.

The default dimension keyword is the center.

The general form is

selector{background-position:horizontal position/vertical position;}

Example:

body{background-position:20% 40%;}
body{background-position:center;}
body{background-position:left bottom;}

Background:

The background property allows us to specify several of the background properties at once. The values can be given in any order, and if we do not supply one of the values, the default value will be used.

The general form is:

selector{background:background-color background-image background-repeat background -position background-attachment;}

Example:

body{background:white url(http://www.clrc/xyz.gif);}
p{background:url(..../background/lion.png)#F0F000 fixed;}
h1{background:#0F0 url (grass.jpg)no-repeat bottom left;}
ul{background:white url(monkey.jpg) repeat scroll 0% 50%;}