CSS background image fill div
CSS background image fills div
In web development, background https://coder-cafe.com/wp-content/uploads/2025/09/images are a common layout method. You can add background https://coder-cafe.com/wp-content/uploads/2025/09/images to elements using CSS. However, when setting a background image, the image size often mismatches the element size. This article details how to use CSS to fill the background image of a div element, achieving various layout effects.
Background Image Fills the Entire Div
If you want a background image to fill the entire div element, you can do so by setting the background-size property. The background-size attribute controls the size of the background image and has the following possible values:
cover: The background image will be scaled up or down to completely cover the element.contain: The background image will be scaled up to completely fit within the element, possibly with some white space.
Here is a sample code showing how to use the cover value to fill the entire div element with a background image:
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Cover</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-size: cover;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
In the above code, by setting the background-size property of the .container class to cover, the background image will be stretched or scaled to fill the entire div element. The effect is shown below:
╔══════════════════════════════════════════╗
║ ║
║ Background Image ║
║ ║
╚═════════════════════════════════════════════╝
Background Image Fills the Div and Maintains Proportions
Sometimes, we want the background image to fill the entire Div element while maintaining the image’s width and height ratio. To do this, we can use the contain value of the background-size property. Here’s a code example showing how to use the contain value to fill a div element and maintain image proportions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Contain</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
In the above code, by setting the background-size property of the .container class to contain, the background image will be scaled to fit completely within the div element while maintaining the image’s aspect ratio. The effect is shown below:
╔═════════════════════════════════════════╗
║ ║
║ Background Image ║
║ ║
╚════════════════════════════════════════════╝
Filling a div with multiple background https://coder-cafe.com/wp-content/uploads/2025/09/images
In addition to filling a div with a single background image, you can also add multiple background https://coder-cafe.com/wp-content/uploads/2025/09/images to a div element. By setting the background-image property and using commas to separate multiple image links, you can display multiple background https://coder-cafe.com/wp-content/uploads/2025/09/images on a div element.
Here’s a sample code showing how to fill a div element with multiple background https://coder-cafe.com/wp-content/uploads/2025/09/images:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Background Images</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('background1.jpg'), url('background2.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
In the above code, by setting the background-image property of the .container class to two background image links and setting the background-size property to cover, multiple background https://coder-cafe.com/wp-content/uploads/2025/09/images can be displayed on a single div element. The effect is shown below:
“`css
╔═══════════════════════════════════════════╗
║ ║
║ Background Image 1 ║
║ Background Image 2 ║
║ ║
╚══════════