The CSS background-position property settles the starting position of a background image.
Demo:
Syntax:
background-position: value;left top/ left center/ left bottom/ right top/ right center/ right bottom/ center top/ center center/ center bottom – if you only define one keyword, the other value will be “center”.
x% y% (default 0%, 0%) – the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only define one value, the other value will be 50%.
xpos ypos – The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0 (units can be any CSS units).
Example:
How to position a background-image to be centered:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 3px solid #333;
width: 300px;
height: 150px;
background: url('https://lenadesign.org/wp-content/uploads/2021/06/icon.png') no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>Output:
Enjoy coding!
Read also:
CSS background-origin Property