---
title: "CSS object-position"
description: "> The CSS `object-position` property is used to specify how an or should be positioned within its container. ## The Image Look at the following image from Paris, which is 400×300 pixels: ![sunset](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg) Next, we use `object-fit: cover;` to keep the aspect ratio and…"
url: "https://apprentice.mn/docs/css-object-position/"
updated: "2021-05-12"
category: CSS
---

# CSS object-position

> The CSS `object-position` property is used to specify how an <img> or <video> should be positioned within its container.

## The Image

Look at the following image from Paris, which is 400×300 pixels:

     ![sunset](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg)

Next, we use `object-fit: cover;` to keep the aspect ratio and to fill the given dimension. However, the image will be clipped to fit, like this:

     ![Sunset](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg)     `img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}`

## Using the object-position Property

Let’s say that the part of the image that is shown, is not positioned as we want. To position the image, we will use the `object-position` property.

Here we will use the `object-position` property to position the image so that the great old building is in center:

     ![Sunset](https://www.w3schools.com/css/paris.jpg)     `img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}`

Here we will use the `object-position` property to position the image so that the famous Eiffel Tower is in center:

     ![Paris](https://www.w3schools.com/css/paris.jpg)     `img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}`

## CSS Object-* Properties

The following table lists the CSS object-* properties:

| Property | Description |
| --- | --- |
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its “own content box” |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-object-position%2F&linkname=CSS%20object-position](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-object-position%2F&linkname=CSS%20object-position)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-object-position%2F&linkname=CSS%20object-position](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-object-position%2F&linkname=CSS%20object-position)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-object-position%2F&linkname=CSS%20object-position](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-object-position%2F&linkname=CSS%20object-position)[https://www.addtoany.com/share](https://www.addtoany.com/share)