Tailwind CSS Background Origin

The background-origin property determines the origin position of the background images. It defines where the background image is positioned and where it will be repeated.

Syntax

Here's the syntax for using the background-origin property in Tailwind CSS:

/* Default values */
.bg-origin-border {
  background-origin: border-box;
}

.bg-origin-padding {
  background-origin: padding-box;
}

.bg-origin-content {
  background-origin: content-box;
}

Example

Here's an example of how to use the background-origin property in Tailwind CSS:

<div class="bg-origin-border bg-green-500 h-24 w-24 m-2">
  <p>Background origin at border, green color</p>
</div>
<div class="bg-origin-padding bg-blue-500 h-24 w-24 m-2">
  <p>Background origin at padding, blue color</p>
</div>
<div class="bg-origin-content bg-red-500 h-24 w-24 m-2">
  <p>Background origin at content, red color</p>
</div>

Output

The above code will render three colored boxes with different background origin positions:

Explanation

The background-origin property specifies the positioning area of the background images. The property can have the following three values in Tailwind CSS:

• border-box: The background image starts from the border box area.
• padding-box: The background image starts from the padding box area.
• content-box: The background image starts from the content box area.

By default, the value of background-origin is padding-box.

Use

You can use the background-origin property to position background images based on your design requirements. It's useful when you want to position the background image based on a specific part of the element.

Important Points

• The background-origin property does not work on non-replaced inline elements.
• In Tailwind CSS, background-origin is available as a utility class.

Summary

• Use the background-origin property to set the origin position of a background image.
• The property can have three values: border-box, padding-box, and content-box.
• By default, the value of background-origin is padding-box.
• In Tailwind CSS, background-origin is available as a utility class.