Saturday, October 27, 2012

Color and Background Property

In this post we are going to study the following properties of CSS :
1.       color
2.       background
3.       background-color
4.       background-image
5.       background-repeat
6.       background-attachment
7.       background-position

Color Property

The color property applies foreground color to element. For example if you want to apply red color to some part of text in your web page:
             <style type=”text/css”>
.testcolor {color : red}
             <title> Example of use of color using CSS</title>
       <body >
             <div class=”testcolor”> This is sample text for our code.</div>

There are 17 basic colors these are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Colors can be applied to the following ways:
1.       By using name:
                     color: red
2.       By using rgb function:
                    color: rgb(255,0,0)
                               rgb(255,0,0) is equal to color red. In this we have to specify the value of three colors red, green and blue from 0 to 255.
3.       By using Hex code:
                  Color: #FF0000                    
                 The hex code are in range from #000000 to #FFFFFF. Use of hex color codes provides us a large number of colors that can be applied.        

background-color Property

This property applies to the background of the element. You can apply the background –color with name or rgb function or hex codes.
   For example if you want to display a paragraph background as green:
<p style=”background-color:green”>This is sample text </p>

background-image property

This property is used to apply the background image to any element.  To display a background image on your webpage you just need to add the background-image property to the <body> element.
             <style type=”text/css”>
.testbkimage {background-image: url(‘flower.jpg’)}
             <title> Example of use of color using CSS</title>
       <body  class=”testbkimage”>

Following is the output for the above code:


The background repeat property will decide how the image will be repeated. There are four property values: 
 repeat the image along the x-axis on the webpage
 repeat the image along the y-axis on the webpage
Repeat the image along x-axis as well as y-axis on the webpage
Background image will not repeat.

The above image shows that the background image is repeated. The property set for the above examples is: “background-repeat: repeat”.


The background-position property allows setting the position of the image. By default the image is set to left top corner of the webpage. Default property is :
background-position: “0% 0%”.
The background-property will set the starting point of the image. There are various ways for setting the background-position of the image.
background-position: 0% 0% or background-position: 0% 0%
background-position: top left
you can set the property using: left right top bottom.
Background-position: 2cm 2cm.


The background-attachment property will specify the image will remain fixed or scroll with webpage. There are two values this property.
The background image will not scroll when the webpage is scrolled
The background  image will scroll when ever the webpage is scrolled.

background Property

This property will help to put together all the properties under one name.
 If you want a div element with flower.jpg image and the image should be repeated along the x-axis also it should remain fixed then it can be done in following way:
             <style type=”text/css”>
.testbkproperty {background:#ffffff url('flower.jpg') repeat-x left top;}
             <title> Example of use of color using CSS</title>
       <body  class=”testbkproperty”>

Output of the above code is given below:

So we can combining all the properties background-image, background-attachment, background-position at put them under single property “background”.