- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set the size of background image using CSS?
Using the CSS, we can use the ‘background-image’ property to set the background image for the HTML element. Also, it requires setting the dimensions of the background image after adding it.
We can use the ‘background-size’ property of the CSS to set the size of the background image.
Syntax
Users can follow the syntax below to use CSS to set the background image size.
background-size: width length | width | contain | inherit | cover | initial
We can use the above values to set the size of the background image. Here, we have explained all values.
Width length − It sets the width and height for the background image. Users can use the pixels, percentage, or rem for the width and length values.
Width − It sets the width only for the image and sets the ‘auto’ for the height.
Contain − It is used to set the background image for the HTML element without decreasing the dimensions of the background image.
Inherit − It inherits the background image size from the parent element’s background image.
Cover − It sets the dimensions of the background image in such a way it can fit into the HTML element.
Example 1
In the example below, we set the background image for the HTML div element. The dimensions of the div element are 500 X 300. Using the background-size property, we set the 200 X 200 size to the background image.
In the output, users can observe that the size of the background image is less than the div element. Also, we have used the ‘background-repeat: no-repeat’ CSS property to avoid repetition.
<html>
<head>
<style>
.div {
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
background-size: 200px 200px;
width: 500px;
height: 300px;
border: 1px solid blue;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3>Using the background-size CSS property to set the size of the background image</h3>
<div class = "div">
This is a content of the div.
</div>
</body>
</html>
Example 2
In the example below, we have used the ‘background-size: cover’ CSS property to set the dimensions of the background image.
In the output, we can observe that the background image fits the div element. However, some image edges were cut when we set the background-size to cover.
<html>
<head>
<style>
.div {
background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
background-size: cover;
width: 500px;
height: 500px;
border: 2px solid green;
}
</style>
</head>
<body>
<h3>Using the <i> background-size </i> CSS property to set the size of the background image</h3>
<div class = "div">
This is a content of the div.
</div>
</body>
</html>
Example 3
In the example below, we have used the ‘background-size: contian’ CSS property to set the background image size.
In the output, we can see that it sets the background image without suppressing the dimensions of the image.
<html>
<head>
<style>
.div {
background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
background-size: contain;
width: 500px;
height: 500px;
border: 2px solid green;
font-size: 3rem;
}
</style>
</head>
<body>
<h3>Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
Example 4
In the example below, we have given only width as a value of the ‘background-size’ property. Whenever we use only a single value for the ‘background-size’ property, it sets the height to auto, which users can see in the output.
<html>
<head>
<style>
.div {
background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
background-size: 20rem;
width: 500px;
height: 500px;
border: 2px solid green;
font-size: 3rem;
}
</style>
</head>
<body>
<h3>Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
Users learned to set the size of the background image using CSS. We can set the custom dimensions to set the background image. Also, we can set the ‘auto’ value for the width and height of the background size. If users want to cover the whole HTML element using the background, they should use ‘cover’ as a value of the background-size property.
583 Views
