How to Adjust Background Image Size in CSS
The background-size is a specific property of the CSS and it specifies the size of the background image. It is used to adjust the background image size in html elements with the help of different types of values. It allows multiple values to control the dimension of the multiple background image in a single element.
The background-size accepts multiple values like length, cover, contain and inherit for resizing the background image in html container. If we use these CSS properties, the background image can be stretched or cropped to fit into the available element space.
CSS background-size Syntax:
We can follow the below syntax to use CSS to adjust the element background image size.
background-size: auto | contain | cover | length | initial | inherit;
In the below syntax, If an element have multiple background images, we can use the comma-separated values to define the different sizes of each one. In CSS code we can define cover and contain values for set image dimensions. If we set a single value in background-size, then it will set only the image width and the image height will be set auto.
#multipleImage1 {
background-image: url(firstImg.gif), url(secondImg.gif); // comma separated multiple image url
background-size: cover, contain; // comma separated size properties
}
#multipleImage2 {
background-image: url(firstImg.gif);
background-size: 400px; // 400px is width value and height will set auto
}
Property Values:
auto: This is default values, the background image is displayed in its original size, It doesn't change anything.
background-size: auto;
contain: The contain value sets the background image fully visible without stretching or cropping.
background-size: contain;
cover: This value is used to resize the background image to cover the entire container. It can be stretched or cropped to fit into the element.
background-size: cover;
length: This value sets the width and height of the background image in the container. According to syntax, the first value sets the image width and the second value sets the height. If we give only one value then, it will set the element width, and height will set auto in the container.
background-size: 400px 300px; // first value is width and second value is height background-size: 400px // first value is width and height is auto
In the above syntax, the first value represents horizontal size and the second value represents vertical size.
inherit: This value inherits the property from the parent element.
Example 1: contain
In the below example, I have set the background image in html DIV element. The width and height of the DIV container are 400 X 400. I used the contain value in the background size.
<!DOCTYPE html>
<html>
<head>
<title>How to Adjust Background Image Size in CSS</title>
<style>
.myImg {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
width: 400px;
height: 400px;
border: 2px solid #000;
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body style="text-align:center">
<h1>WebRecto.com</h1>
<h2>background-size: contain;</h2>
<div class="myImg">
We can add content here
</div>
</body>
</html>
Output:
Example 2: cover
In the below example, I have used the background-size: cover to set the dimensions of the background image.
<!DOCTYPE html>
<html>
<head>
<title>How to Adjust Background Image Size in CSS</title>
<style>
.myImg {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
width: 400px;
height: 400px;
border: 2px solid #000;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body style="text-align:center">
<h1>WebRecto.com</h1>
<h2>background-size: contain;</h2>
<div class="myImg">
We can add content here
</div>
</body>
</html>
Output:
Example 3: length
In the below example, I have set the background image for the HTML div element. The width and height of the div element are 400 X 400 and the background-size property is 250 X 200.
<!DOCTYPE html>
<html>
<head>
<title>How to Adjust Background Image Size in CSS</title>
<style>
.myImg {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
width: 400px;
height: 400px;
border: 2px solid #000;
background-repeat: no-repeat;
background-size: 250px 200px;
}
</style>
</head>
<body style="text-align:center">
<h1>WebRecto.com</h1>
<h2>background-size: contain;</h2>
<div class="myImg">
We can add content here
</div>
</body>
</html>