CSS background property defines the background effects and changes on an element. There are 3 CSS background properties that affects the HTML elements:
1)background-color
2)background-image
3)background-repeat
1) CSS background-color
This property is used for the the background color of the element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Sachin sir. This is an example of CSS background-color.</p>
</body>
</html>
2) CSS background-image
This property sets an image as a background of an element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Evontech.com</h1>
</body>
</html>
3) CSS background-repeat
This property is used to repeat the background image horizontally and vertically. Some images are repeated only horizontally or vertically.
The background looks good if the image repeated horizontally only.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient-bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>
0 Comment(s)