CSS background-image property with example

In this chapter you will learn:
About background-image property
Use of background-image property
Examples of background-image property

background-image is one of the most important properties of CSS which is used to change the background of web pages with the image to give an attractive design and look.

Use of background-image property:-

Images are very important for web pages because they give look and feel to attract users. Sometimes we want to include images in the background of tags or elements such as in the background of the table, body etc so in that condition we use background-image property.

Examples of background-image property:-
Example 1. Background image of body-
Code
<html>
<head>
<styletype="text/css">
body
 {
    background-image:url("backgroundimage.jpg");
}
</style>
</head>
<body>
<p>
Welcome to this tutorial.
</p>
</body>
</html>

Guide:

i)In the given code "backgroundimage.jpg" is an image name with extension .jpg so you can use any image to replace the code.
ii) If you save the image and code in same folder or location then it will easy to run because in this situation you need not give the path of the image. Only write the name of the image with its extension.

Output: background image of body Example 2. Background image of div:- Code
<html>
<head>
<styletype="text/css">
div
 {
    background-image: url("backgroundimage.jpg");
height:200px;
}
</style>
</head>
<body>
<p>
This is the example of background-image ofdiv
</p>
<div>
</div>
</body>
</html>

Guide:-

i) Follow the same step of example one
ii) The output of this code is different from example 1 because here background-image property has used for div which is the tag of HTML.

Summary

In this chapter, you have learned about the background-image property and its uses so now try it yourself and click on Next button to continue.

 

Share your thought