EN
CSS - center background image
0
points
In this article, we would like to show you how to center background-image using CSS.
Quick solution:
div {
background-position: center;
}
Practical example
To center the background image, we need to set background-position property value to center.
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
border: 1px solid black;
/* background properties */
background-image: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png');
background-size: 50px;
background-repeat: no-repeat;
background-position: center; /* center image */
}
</style>
</head>
<body>
<div></div>
</body>
</html>