Home »
CSS
How to set background image size using CSS?
CSS background-size property: In this tutorial, we will learn about setting an image in the background with the help of examples using CSS.
By Anjali Singh Last updated : July 10, 2023
Introduction
As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role in indulging users to websites or web pages. The images are a very smart way to represent any piece of information through colors and art.
Now that we know the importance and necessity of the images, why don’t we think about the topic at hand which is how can we set the background image size using CSS on our website or web page and to answer that curiosity, keep reading!
Setting background image size using CSS
To set the background image size the background-size property of CSS is used.
Syntax
Element{
background-size:auto|length|cover|contain;
}
Values
Now that we have a basic idea of this property and how it helps in resizing the image on our website or web page, so let us keep moving forward in this article and get to know about the different values about this property.
This property contains 4 values to the background-size property and is listed below,
- auto
- length
- cover
- contain
Let us discuss these properties one by one.
1) background-size:auto
The auto value of the background-size property is useful to display the original size of the image in terms of length and width. It is also the default value.
Syntax:
Element{
background-size:auto;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: auto;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
In the above example, auto property value is used.
2) background-size:length
The length value of the background-size property is useful to display the width and height of the image by the user’s choice. The first value is used to set the width and the second is used to set the height of the image.
Note: If only one value is given, the second is set to auto by default.
Syntax
Element{
background-size:width height;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: 600px 200px;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
In the above example, the width and length of the image are defined.
3) background-size:cover
The cover value of the background-size property is useful to resize the original size of the image in terms of length and width to cover the entire container. It can also stretch or cut the image to cover the entire container if needed.
Syntax
Element{
background-size:cover;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
In the above example, the image is cut to fit the container.
4) background-size:contain
The contain value of the background-size property is useful to resize the original size of the image in terms of length and width to make sure the image is fully visible to the user.
Syntax
Element{
background-size:contain;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: contain;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
In the above example, the image is fully visible to the user with the help of background-size: contain.
CSS Examples »