# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/object-position.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx";

export const title = "object-position";
export const description =
  "Utilities for controlling how a replaced element's content should be positioned within its container.";

<ApiTable
  rows={[
    ["object-top-left", "object-position: top left;"],
    ["object-top", "object-position: top;"],
    ["object-top-right", "object-position: top right;"],
    ["object-left", "object-position: left;"],
    ["object-center", "object-position: center;"],
    ["object-right", "object-position: right;"],
    ["object-bottom-left", "object-position: bottom left;"],
    ["object-bottom", "object-position: bottom;"],
    ["object-bottom-right", "object-position: bottom right;"],
    ["object-(<custom-property>)", "object-position: var(<custom-property>);"],
    ["object-[<value>]", "object-position: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `object-left` and `object-bottom-right` to specify how a replaced element's content should be positioned within its container:

<Figure hint="Hover over examples to see the full image">

<Example padding={false}>
  {
    <div className="flex snap-x scroll-p-4 items-end overflow-x-scroll overflow-y-hidden p-8 pt-16 sm:grid sm:grid-cols-3 sm:gap-16">
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-top-left
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-left ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute top-0 left-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-top
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute top-0 -left-6 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-top-right
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-right ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute top-0 right-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-left
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-left ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute -top-6 left-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-center
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-center ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute -top-6 -left-6 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-right
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-right ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute -top-6 right-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-bottom-left
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-left ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute -top-12 left-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-bottom
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute -top-12 -left-6 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
      <div className="relative -mx-8 w-56 shrink-0 snap-start snap-always sm:w-auto">
        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          object-bottom-right
        </p>
        <div className="group relative mx-auto size-20 rounded-lg">
          <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-right ring-1 ring-black/10 ring-inset"></div>
          <img
            className="absolute -top-12 right-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:object-top-left,object-top-right,object-center,object-bottom-left,object-bottom-right,object-bottom,object-left,object-right,object-top] -->
<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-top ..." src="/img/mountains.jpg" />
<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-center ..." src="/img/mountains.jpg" />
<img class="size-24 object-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="object"
  name="object position"
  value="25%_75%"
/>

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="object-position"
  defaultClass="object-center"
  featuredClass="object-top"
/>