CSS Background-Size Property

In this chapter you will learn:
Use of background-size property
Example of background-size property

As its name suggest background-size so it is cleared that it is used to set the size of the background image. If you want to use an image in the background and also want to set its size(width and height) then you can use this property. We give two values for background-size in which left value is used to set the width of the image and right value for height

Example of background-size property:-
<html>
<head>
<style type="text/css">
body
{
background-image:url("rose.jpg");
background-size:250px 300px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
This is the example of background-size property.
</body>
</html>

Guide:-

i) If you will run the given command then you will get that the size of the background image is adjected to the given size. ii) rose.jpg is the name of the image so you can use any name of the image but always use its extension.

Output:- image of background-image property

Summary

In this chapter, you have learned about the background-size property and its example with output so now try it yourself and click on next button to continue-

 

Share your thought