Skip to main content

CSS object-position property

This CSS property is used to specify the alignment of the content within the container. It is used with the object-fit property to describe how an element like <video> or <img> is positioned with x/y coordinates within its container.

When using the object-fit property, the default value for object-position is 50% 50%, so, by default, all images are positioned in the center of their container. We can change the default alignment by using the object-position property.

Syntax​

object-position: <position> | inherit | initial;

where:

  • position: It defines the position of the video or the image within the container. It takes two numerical values (such as 0 10px) in which the first value manages the x-axis, whereas the second value controls the y-axis. It can be a string (left, right or center) or can be number (in % or px). It allows negative values. Its default value is 50% 50%. We can use string values like the right top, left bottom, etc.

  • initial: It sets the property to the default value.

  • inherit: It inherits the property from its parent element.

Table of Contents