CSS background image is displayed in the center
CSS Background Image Centering
In web design, background https://coder-cafe.com/wp-content/uploads/2025/09/images are often used to decorate pages or elements. Sometimes, we want to center a background image for a better visual effect. This article will detail how to use CSS to center a background image.
Using the background-position Property
To center a background image, you can use the CSS background-position property. The background-position property sets the starting position of the background image. By setting different starting position values, you can center the background image within an element.
Here is a simple example code that demonstrates how to use the background-position property to center a background image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
In this code, we create a div element and set its background image, background.jpg. By setting background-position: center;, the background image will be centered horizontally and vertically within the div element.
Using the background property
In addition to using the background-position property alone, you can also use the background property to set the starting position of a background image and center it.
Here is a sample code that demonstrates how to use the background property to center a background image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 300px;
height: 200px;
background: url('background.jpg') center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
In this code, we directly set the background image’s starting position to center center in the background property, centered both horizontally and vertically.
Using Flex Layout
Another way to achieve centering the background image is to use Flex Layout. Flex Layout is a modern layout method that makes it easy to arrange and align elements.
Here is a sample code that demonstrates how to use Flex layout to center a background image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-size: cover;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
In this code, we set display: flex; for the container element and use justify-content: Center it both horizontally and vertically using the <code>center; and align-items: center; properties. This method makes it easy to center a background image.
Conclusion
Using the above methods, we can easily center a background image. Whether using the background-position property, the background property, or Flex layout, you can center a background image beautifully within a page or element.