Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Center a Background Image Inside a div?
When creating web pages, centering a background image in a div is a common design requirement. There are several CSS methods available, each suited for different scenarios. This article demonstrates various techniques to center background images inside divs regardless of screen size or container dimensions.
Syntax
/* Method 1: Background Position */
.container {
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
}
/* Method 2: Flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Method 3: CSS Grid */
.container {
display: grid;
place-items: center;
}
Method 1: Using CSS Background Position
The simplest method uses the background-position property to center a background image within its container
<!DOCTYPE html>
<html>
<head>
<style>
.background-center {
width: 300px;
height: 200px;
border: 2px solid #333;
background-color: #f0f0f0;
background-image: url('/css/images/logo.png');
background-position: center;
background-repeat: no-repeat;
background-size: 100px 60px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="background-center">Centered Background</div>
</body>
</html>
A gray container with a centered background image and text "Centered Background" appears on the page.
Method 2: Using Flexbox with Image Element
For centering actual image elements (not background images), flexbox provides precise control
<!DOCTYPE html>
<html>
<head>
<style>
.flex-center {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: #e6f3ff;
border: 2px solid #0066cc;
overflow: hidden;
}
.centered-img {
max-width: 80%;
max-height: 80%;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="flex-center">
<img src="/css/images/logo.png" alt="Centered Image" class="centered-img">
</div>
</body>
</html>
A light blue container with a centered image that maintains aspect ratio appears on the page.
Method 3: Using CSS Grid
CSS Grid offers a clean solution for centering images with minimal code
<!DOCTYPE html>
<html>
<head>
<style>
.grid-center {
display: grid;
place-items: center;
width: 300px;
height: 200px;
background-color: #ffe6e6;
border: 2px solid #cc0000;
overflow: hidden;
}
.grid-img {
max-width: 80%;
max-height: 80%;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="grid-center">
<img src="/css/images/logo.png" alt="Grid Centered Image" class="grid-img">
</div>
</body>
</html>
A light pink container with a perfectly centered image using CSS Grid appears on the page.
Method 4: Using Absolute Positioning
For precise control, absolute positioning with transform provides pixel-perfect centering
<!DOCTYPE html>
<html>
<head>
<style>
.position-center {
position: relative;
width: 300px;
height: 200px;
background-color: #f0fff0;
border: 2px solid #006600;
overflow: hidden;
}
.positioned-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="position-center">
<img src="/css/images/logo.png" alt="Positioned Image" class="positioned-img">
</div>
</body>
</html>
A light green container with an absolutely centered image using transform positioning appears on the page.
Method 5: Using Object-Fit for Full Coverage
When you want the image to fill the container while maintaining aspect ratio, use object-fit
<!DOCTYPE html>
<html>
<head>
<style>
.object-fit-center {
width: 300px;
height: 200px;
background-color: #fff8dc;
border: 2px solid #daa520;
overflow: hidden;
}
.object-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
</style>
</head>
<body>
<div class="object-fit-center">
<img src="/css/images/logo.png" alt="Object Fit Image" class="object-img">
</div>
</body>
</html>
A cream-colored container with an image that fits completely within the bounds while maintaining its aspect ratio appears on the page.
Conclusion
Each method serves different purposes: use background-position: center for background images, flexbox or grid for responsive layouts, absolute positioning for precise control, and object-fit when you need images to fill containers while maintaining proportions.
1K+ Views
