Definition:
Background size sets the size of the background elements.
Let’s use the following image to set as a background size.

Property Values are:
auto
length
percentage
cover
contain
initial
inherit
Syntax:
background-repeat: auto;
background-repeat: length;
background-repeat: percentage;
background-repeat: cover;
background-repeat: contain;
background-repeat: initial;
background-repeat: inherit;
Let go of the above property values one by one and see the output.
1. background-size: auto;
Definition:
The background image is into its original image size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: auto;
}
.background-size-title, .background-size-text{
padding-left: 100px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: auto;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is auto.</p>
</div>
</body>
</html>
Output:

2. background- size: length;
Defination:
The background image defines width and height value. The first defines the width of the image and the second value defines the height of the image. If you use only one value, the second value is set to “auto”.
Let’s see an example with only one value and two values.
Source Code: Only One value
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 40px;
}
.background-size-title, .background-size-text{
padding-left: 100px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: length;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is 40px length. You can use length value according to your background size needs..</p>
</div>
</body>
</html>
Output:

Source Code: Two value length
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 40px 80px;
}
.background-size-title, .background-size-text{
padding-left: 100px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: length;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value are 40px width and 80px height in length. You can use length value according to your background size needs..</p>
</div>
</body>
</html>
Output:

3. background- size: percentage;
Definition:
The background image defines width and height value. The first defines the width of the image in percentage and the second value defines the height of the image in percentage. If you use only one value, the second value is set to “auto”.
Let’s see an example with only one value and two values.
Source Code: Only One Value
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 40%;
}
.background-size-title, .background-size-text{
padding-left: 220px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: percentage;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is percentage. The percentage value is 40%.</p>
</div>
</body>
</html>
Output:

Source Code: Two values in Percentage
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 40% 60%;
}
.background-size-title, .background-size-text{
padding-left: 220px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: percentage;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is percentage. The <b>first</b> percentage value is 40% width and the <b>second</b> percentage value is 60% height.</p>
</div>
</body>
</html>
Output:

4. background-size: cover;
Defination:
It covers the background with the background image. If the background image is smaller than the background size, the background image will get stretched and cover the entire background by the background image. See the output below to understand clearly.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: cover;
}
.background-size-title, .background-size-text{
padding-left: 220px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: cover;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is cover. You can see here the image covers the background.</p>
</div>
</body>
</html>
Output:

5. background- size: contain;
Defination:
The background-size property value contains resizing the background image to make sure the image is fully visible.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: contain;
}
.background-size-title, .background-size-text{
padding-left: 220px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: contain;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is contain.</p>
</div>
</body>
</html>
Output:

6. background-size: initial;
Definition:
Sets the property value to its default value.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: initial;
}
.background-size-title, .background-size-text{
padding-left: 100px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: initial;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is initial.</p>
</div>
</body>
</html>
Output:

7. background- size: inherit;
Definition:
Inherit this property value to its parent element.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-size{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: inherit;
}
.background-size-title, .background-size-text{
padding-left: 100px;
}
</style>
</head>
<body>
<div id="background-size">
<h3 class="background-size-title">background-size: inherit;</h3>
<p class="background-size-text"> Here is an example of image with background-size property value is inherit.</p>
</div>
</body>
</html>
Output:

Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)