📪Backgrounds Origin

Background Origin Classes

The following classes control the background origin of elements:

.bg-origin-border Sets the background origin to the border box, causing the background to originate from the border edges of the element.

CSS equivalent: background-origin: border-box;

Example usage:

<div class="bg-origin-border">
  <!-- Content with a background originating from the border edges -->
</div>

In the example above, the background of the element will originate from the border edges.

.bg-origin-padding Sets the background origin to the padding box, causing the background to originate from the padding edges of the element.

CSS equivalent: background-origin: padding-box;

Example usage:

<div class="bg-origin-padding">
  <!-- Content with a background originating from the padding edges -->
</div>

In the example above, the background of the element will originate from the padding edges.

.bg-origin-content Sets the background origin to the content box, causing the background to originate from the content edges of the element.

CSS equivalent: background-origin: content-box;

Example usage:

<div class="bg-origin-content">
  <!-- Content with a background originating from the content edges -->
</div>

In the example above, the background of the element will originate from the content edges.

These utility classes provide a convenient way to control the background origin of elements, allowing you to customize the position from which the background originates within the element's box model.