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>