LAST UPDATED: MAY 31, 2021
CSS background-size Property
CSS background-size property is used to set the size of the background-image element. The background image may be either left to its natural size or stretched or constrained to fit in the available space.
Syntax for background-size Property
Following is the syntax for the background-size property.
background-size: auto|length|cover|contain|initial|inherit;
CSS background-size property values
Let's see what values this property can have and what do these values:
|
Value
|
Description
|
|
contain
|
In this case, the image is scaled as large as possible in the container without getting cropped or stretched. In case the container is larger than the image, then the image gets tiled unless the 'background-repeat property is set to 'no-repeat.
|
|
cover
|
In this case, the image is scaled as large as possible to fill in the container and gets stretched if necessary. And if the element and the proportion of the image are found to be different, then the image gets cropped either horizontally or vertically, leaving no empty space in between.
|
|
auto
|
In this case, the background image is scaled in the corresponding direction in such a way that its intrinsic properties are maintained.
|
|
length
|
In this case, the image is stretched in the corresponding dimension to a specified length, where negatives values are not allowed.
|
|
percentage
|
In this case, the image is stretched in the corresponding dimension to a specified percentage of the background-position area.
|
Example 1: CSS background-size Property
In the example below, we are using the background-size property with different background positions, borders, and different values. In this case, we have given the background-size value as 160px i.e; using one value. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<head>
<title>Background-size property</title>
<style type="text/css">
.tiledBackground {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: 160px;
width: 200px;
height: 200px;
border: 2px solid;
color: pink;
}
</style>
</head>
<body>
<div class="tiledBackground"></div>
</body>
</html>
Output:
Example 2: CSS background-size Property using the keyword values
In the example below, we are using the background-size property with different background positions, borders, and different values. In this case, we have given the background-size value as contain i.e; the keyword value.
<!DOCTYPE html>
<head>
<title>Background-size property</title>
<style type="text/css">
.tiledBackground {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: contain;
width: 200px;
height: 200px;
border: 2px solid;
color: black;
}
</style>
</head>
<body>
<div class="tiledBackground"></div>
</body>
</html>
Output:
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Conclusion
This property is applicable to all elements. It is also applicable to ::first-letter and ::first-line. It is not an inherited property. Percentage values are relative to the background-position area. The computed value for this property is the specified one but it is converted into absolute lengths with the relative lengths. The animation type for this property is a repeatable list of a simple list of lengths, percentages, or calc.
