CSS object-position

The object-position property in CSS specifies the position of the replaced element inside its box. This property is useful when you want to specify where the image should be placed within its container.

The syntax for the object-position property is:


.object {
  object-position: x-axis y-axis;
}

The values for x-axis and y-axis can be specified using keywords like top, bottom, left, right, center, or using length units like px, em, or percentages.

Result:
Example Image

In the example above, we have set the object-position to center bottom, which means the image will be centered horizontally and aligned to the bottom of its container.

If you want to position the image to the top left corner, you can use the following code:


.object {
  object-position: top left;
}
Result:
Example Image

Play around with different values for x-axis and y-axis to achieve the desired positioning for your images using the object-position property.