CSS object-position Property

February 10, 2021 12:37 pm IST

You are Here:

CSS object-position Property

CSS object-position property specifies how an <img> or <video> should be positioned with x/y coordinates within the element's box.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 200px; height: 200px; border: 1px solid black; background-color: #fff; margin-right: 1em; object-fit: none; } #point{ object-position: left bottom; } #point1{ object-position: 50% 50%; } #point2{ object-position: right top; } #point3{ object-position: 250px 150px; } </style> </head> <body> <h1>CSS object-position Property</h1> <h2>object-position: left bottom;</h2> <img id="point" src="apple.png"> <h2>object-position: 50% 50%;</h2> <img id="point1" src="apple.png"> <h2>object-position: right top;</h2> <img id="point2" src="apple.png"> <h2>object-position: 250px 150px;</h2> <img id="point3" src="apple.png"> </body> </html>

Run

Syntax

Using CSS

element{ object-position: left bottom; }

Using Javascript

object.style.objectPosition="left bottom";

Animatable

Yes, object-position property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS object-position property is 50% 50%.

Property Value

The following table provides a list of values for CSS object-position property.

Value	Explanation
position	From one to four values that define the 2D position of the element. Relative or absolute offsets can be used. Possible values: x-axis: a string (left, center or right), or a number (in px or %) y-axis: a string (left, center or right), or a number (in px or %) Negative values are allowed.

Using JavaScript

In the following example, we will demonstrate how to change the CSS object-position property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 200px; height: 200px; border: 1px solid black; background-color: #fff; margin-right: 1em; object-fit: none; object-position: left bottom; } button{ display: block; } </style> </head> <body> <h1>CSS object-fit Property</h1> <img src="apple.png"> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.objectPosition = "50% 50%"; } </script> </body> </html>

Run