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

Values

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.

Now, lets' see some examples that will illustrate the object-position property.

Example

Output

After the execution of the program, we will get the output as shown in the below image.

Example- using "center top"

Output

Example- using "right top"

Output

Example- using "left top"

Output

Example- using "initial"

When we use the initial value, then the image will be positioned to the center. It is because the initial sets the property to its default value, which is 50% 50%.

Output