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:
<html>
<head>
<style type=”text/css”>
.testcolor {color : red}
</style>
<title> Example of use of
color using CSS</title>
<head>
<body >
<div class=”testcolor”> This
is sample text for our code.</div>
</body>
</html>
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.
<html>
<head>
<style type=”text/css”>
.testbkimage {background-image: url(‘flower.jpg’)}
</style>
<title> Example of use of
color using CSS</title>
<head>
<body class=”testbkimage”>
</body>
</html>
Following is the output for the above
code:
Background-repeat
The background repeat property will
decide how the image will be repeated. There are four property values:
Value
|
Description
|
repeat-x
|
repeat the image along the x-axis on the
webpage
|
repeat-y
|
repeat the image along the y-axis on the
webpage
|
repeat
|
Repeat the image along x-axis as well
as y-axis on the webpage
|
no-repeat
|
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”.
background-position
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.
background-attachment
The background-attachment property will
specify the image will remain fixed or scroll with webpage. There are two
values this property.
Value
|
Description
|
fixed
|
The background image will not scroll when the
webpage is scrolled
|
scroll
|
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:
<html>
<head>
<style type=”text/css”>
.testbkproperty {background:#ffffff url('flower.jpg')
repeat-x left top;}
</style>
<title> Example of use of
color using CSS</title>
<head>
<body class=”testbkproperty”>
</body>
</html>
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”.
No comments:
Post a Comment