In this article, we will see how to fit background images into HTML div. The main problem that is being solved here is that the dimensions of the background image of a div are not exactly the same as the dimensions of the actual div, so there arises a mismatch. Due to this mismatch, the background image doesn’t fit properly in the div. Now, there are two terms among them one is fill and the other one is fit.
To fit a background image to a div using CSS, you can use the background-size property. Set it to the value cover to make the background image cover the entire div. Additionally, you may want to use background-position: center it to center the background image within the div. This combination ensures that the image scales to cover the div while maintaining its aspect ratio.
Syntax:
div{
background-size: contain;
}
Approach:
- Create a HTML Structure with div container in your HTML with the appropriate class names for styling.
- Now use the ‘background’ property in CSS to add the desired image to the div.
- Define the width, height, and other styling properties for better styling
- Now add ‘background-repeat: no-repeat;’ to ensure the repeatition of image foes not occur.
- Apply ‘background-size: contain;’ to make the background image fit within the div.
Example 1: Implementation of the background-size: contain; to fit the background image to a div. To illustrate the effect there is one div and background image with it and then without it.
<!DOCTYPE html><html lang="en">
<head>
<title>
Fit background image to div
</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
display: flex;
}
.container-1 {
background: url(
width: 250px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;
border: 0.25rem solid black;
margin-left: 10%;
margin-top: 5%;
margin-right: 10%;
}
.container-2 {
background: url(
border: 0.25rem solid black;
width: 250px;
margin-top: 5%;
height: 300px;
}
</style>
</head>
<body>
<h1 style="color: green;
margin: 1rem">
GeeksforGeeks
</h1>
<h3 style="margin: 1rem;
margin-top: -1rem">
Fit background image to div
</h3>
<div class="container">
<div class="container-1"></div>
<div class="container-2"></div>
</div>
</body>
</html>
|
Output:
Example 2: Implementation of difference between the fill and fit of the background image in the div using the background-size: contain; and background-size: contain; properties respectively.
<!DOCTYPE html><html lang="en">
<head>
<title>
Fit background image to div
</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
display: flex;
}
.container-1 {
background: url(
width: 250px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;
border: 0.25rem solid black;
margin-left: 10%;
margin-top: 5%;
margin-right: 6%;
}
.container-2 {
background: url(
border: 0.25rem solid black;
width: 250px;
margin-top: 5%;
height: 300px;
background-size: cover;
}
p {
margin-left: 10%;
}
</style>
</head>
<body>
<h1 style="color: green;
margin: 1rem">
GeeksforGeeks
</h1>
<h3 style="margin: 1rem;
margin-top: -1rem">
Fit background image to div
</h3>
<div class="container">
<div class="container-1"></div>
<div class="container-2"></div>
</div>
<div class="container">
<p>with
<code>background-size: contain;</code>
</p>
<p>with
<code>background-size: cover;</code>
</p>
</div>
</body>
</html>
|
Output: