The object-position property defines the way in which video or image is positioned with X-Y coordinates inside it’s content box. It’s default value is 50% 50% so that the position of all images is set to centre of the content box by default. 


selector { 

    object-position: position [1-4] | initial | inherit;



The object-position property accepts following values:

  • position; One to four values representing all four edges of the given element's box (from top clockwise). The position value is represented in pixels or percentage.
  • initialinherit
NOTE: The position values may be given so the content ends up set outside the box.


The example with object-position property:


›› go to examples ››