What is Background?
Background mean back area of an element or specific area of webpage.Some important properties of background are :
background-color
background-image
background-repeat
background-attachment
background-position
Syntax:
background-property:value;
Property include:color,image,repeat,attachment and position.
Example:
background-color:red;
background-image:url('C://images/beauty.jpg');
background-attachment:fixed;
background-repeat:repeat-x;
background-position:center top;
Background color
It is an important property of an background to change the background color of an element.Syntax
background-color:value;
Note:Here value may be a name of color or color code.
Example:
background-color:red;
OR
background-color:#00efff;
How to use this property?
<html>
<head>
<style>
body{
background-color:green;
}
</style>
</head>
<body>
</body>
</html>
Outcome:
This Program will change background color of body(webpage);
Background Image
What is background Image?Background image is used to show image on the background of an element.
Syntax:
background-image:url('path.extension');
Path:It is the link of an image file.
Extension:It shows the type of an image file.
There are different type of image format like png,jpg and gif etc.
Example:
background-image:url('C://images/beauty.jpg');
How to use this property?
<html>
<head>
<style>
body{
background-image:url('D://images/flower.png');
}
</style>
</head>
<body>
</body>
</html>
Outcome:This program will show you an image on page body.
Background Position
What is background postion?Background position is used to set the position of an image.
Syntax:
background-position: 1st position value 2nd position value;
Position values are:right,left,center,top and down;
Example:
background-position:right top;
How to use this property?
<html>
<head>
<style>
img{
width:300Px;
height:380px;
background-position:right top;
}
</style>
</head>
<body>
<img src="C://folder/images/redrose.jpg" />
</body>
</html>
Outcome:
This program will show you an image with given size on top right corner of webpage.
Background Repeat
Background repeat is used to repeat backgound specially used with image.Syntax:
background-repeat:value;
Value includes =>>repeat,no-repeat,repeat-x,repeat-y,initial,inherit
Example:
background-image:url("D://images/sunshine.jpg");
background-repeat:repeat-x;
How to use this property?
<html>
<head>
<style>
body{
background-image:url("D://images/sunshine.jpg");
width:300Px;
height:380px;
background-position:right top;
background-repeat:repeat-y;
}
</style>
</head>
<body>
</body>
</html>
Outcome:
This program shows a background image with given size that's repeat vertically on the top right side of webpage.
Background Attachment
Syntax:background-attachment:value;
Values include=>>fixed|scroll|inherit|no|initial
Example:
background-attachment:scroll;
How to use this property?
<html>
<head>
<style>
body{
background-image:url("D://images/sunshine.jpg");
width:300Px;
height:380px;
background-position:right top;
background-repeat:repeat-y;
background-attachment:fixed;
}
</style>
</head>
<body>
</body>
</html>
