Object position property (object-position)

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.

Syntax:

selector {

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

}

Values:

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.
initial, inherit

NOTE: The position values may be given so the content ends up set outside the box.

Example

The example with object-position property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h5 {
   margin-top:10px; margin-bottom:10px;
}
img {
    width:200px; height:120px;
    background-color:gray; border:1px solid #222;
}
img.offset {
     object-position: 20px 10px;
        -webkit-object-position: 20px 10px;
        -moz-object-position: 20px 10px;
        -o-object-position: 20px 10px;
        -ms-object-position: 20px 10px;
}
</style>
</head>
  
<body>

<h5>This property may not yet work well in all browsers. Try different browsers.</h5>

<div>
<img src="../../../img/tutorials/ff_anim.jpg" alt="example" />original<br />
<img src="../../../img/tutorials/ff_anim.jpg" alt="example" class="offset" />
</div>
</body>
</html>

›› go to examples ››

Object position property (object-position)

Syntax:

Values:

Example

The example with object-position property:

Comments

About

Contact

Get Connected