Tailwind CSS Object Position

Tailwind CSS offers a utility class called object-position that allows you to control the position of an element's background image or video.

Syntax

The object-position utility class is written in the following format:

<object class="object-position-{value}"></object>

Examples

Center

The .object-position-center class centers an element's background image or video.

<div class="w-64 h-64 bg-center bg-cover object-none" style="background-image: url('path/to/image.jpg')"></div>

Top

The object-top class aligns an element's background image or video with the top of the container.

<div class="w-64 h-64 bg-top bg-cover object-none" style="background-image: url('path/to/image.jpg')"></div>

Bottom

The object-bottom class aligns an element's background image or video with the bottom of the container.

<div class="w-64 h-64 bg-bottom bg-cover object-none" style="background-image: url('path/to/image.jpg')"></div>

Left

The object-left class aligns an element's background image or video with the left of the container.

<div class="w-64 h-64 bg-left bg-cover object-none" style="background-image: url('path/to/image.jpg')"></div>

Right

The object-right class aligns an element's background image or video with the right of the container.

<div class="w-64 h-64 bg-right bg-cover object-none" style="background-image: url('path/to/image.jpg')"></div>

Output

Applying the object-position utility class to an element will adjust the position of the element's background image or video as specified.

Explanation

The object-position utility class in Tailwind CSS controls the position of an element's background image or video. The class takes a value as an argument to set the position.

Use

You can use the object-position utility class in your Tailwind CSS projects to control the position of background images or videos in an element.

Important Points

• The object-position utility class only works with elements that have a background image or video.
• The object-position utility class aligns the background image or video according to the specified position value.

Summary

In summary, Tailwind CSS provides a useful utility class called object-position that allows you to control the position of an element's background image or video. You can specify the position using one of the available values such as center, top, bottom, left, or right.