background-position Archives

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!