To define the background effects on an HTML element, the CSS background property is used. In an HTML element, five types of CSS background properties are used. These are:
- Background-color property
- Background-image property
- Background-repeat property
- Background-attachment property
- Background-position property
CSS background-color:
To define the background color of an element, the background color property is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: crimson;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Today is a great day!!</p>
</body>
</html>
Explanation:
In the above example, we defined the background color of an element.
CSS background-image:
To set an image as the background of an element, the background-image property is used. The entire element is covered by the image by default.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Today is a great day!!</p>
</body>
</html>
Explanation:
In the above example, we set the background image of an element.
CSS background-repeat:
The background-image property is used to repeat the background image horizontally and vertically.
Example: background-repeat: repeat-x
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Today is a great day!!</p>
</body>
</html>
Explanation:
In the above example, the background-image property is used to repeat the background image horizontally.
Example: background-repeat: repeat-y
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Today is a great day!!</p>
</body>
</html>
Explanation:
In the above example, the background-image property is used to repeat the background image vertically.
CSS background-attachment:
To determine if the background image is fixed or scrolls relative to the rest of the web page, the background-attachment property is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: left bottom;
margin-right: 100px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Scroll down to see the effect.</h1>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we fixed the background image. During scrolling in the browser, the image does not move when the background image is fixed.
CSS background-position:
To specify the initial position of the background image, the background-position property is used. The following positions can be set: center, top, bottom, left, and right.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: left bottom;
margin-right: 100px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Scroll down to see the effect.</h1>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
<p>Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we fixed the background image. During scrolling in the browser, the image does not move when the background image is fixed. Scroll down the image to see the actual effect.