Table of Contents

CSS Background-size Property

  • Using this property set image size of background image.

CSS Syntax→ background-size: auto|length|cover|contain;

  • Auto→ Default value. This background image property value is displayed in its original size.
  • Length → Using this property value to Sets the width and height of the background image.
Note:-The first value set the width, the second value set the height. If you give only one value then second value is set default to “auto”.
  • percentage → Sets the width and height of the background image in percent. If you give only one value then second value is set default to “auto”.
  • cover→It is used to resize the background image to cover a whole container element.
  • contain→ Resize the background image to make sure the image is fully visible
Example
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url('https://nielitbhu.com/image.jpg');
border: 1px solid black;
background-size: auto;
padding: 25px;
}

#example2 {
background: url('https://nielitbhu.com/image.jpg');
border: 1px solid black;
background-size: 350px 100px;
padding: 25px;
}
#example3 {
background-image: url('https://nielitbhu.com/image.jpg');
border: 1px solid black;
background-size: 30%;
padding: 25px;

}
</style>
</head>
<body>
<h1>CSS Background-size Property</h1>

<h2>background-size: auto (default):</h2>
<div id="example1">
<h2>Hello World</h2>
</div>

<h2>background-size: 300px 100px:</h2>
<div id="example2">
<h2>Hello World</h2>

</div>
<h2> background-size: 30%; </h2>
<div id = "example3">
<h2>Hello World</h2>
</div>

</body>
</html>

</body>
</html>