📪Backgrounds Position

Background Position Classes

The following classes control the background position of elements:

.bg-pos-top-left Sets the background position to the top left corner.

CSS equivalent: background-position: top left;

Example usage:

<div class="bg-pos-top-left">
  <!-- Content with background positioned at the top left corner -->
</div>

In the example above, the background of the element will be positioned at the top left corner.

.bg-pos-top-center Sets the background position to the top center.

CSS equivalent: background-position: top center;

Example usage:

<div class="bg-pos-top-center">
  <!-- Content with background positioned at the top center -->
</div>

In the example above, the background of the element will be positioned at the top center.

.bg-pos-top-right Sets the background position to the top right corner.

CSS equivalent: background-position: top right;

Example usage:

<div class="bg-pos-top-right">
  <!-- Content with background positioned at the top right corner -->
</div>

In the example above, the background of the element will be positioned at the top right corner.

.bg-pos-center-left Sets the background position to the center left.

CSS equivalent: background-position: center left;

Example usage:

<div class="bg-pos-center-left">
  <!-- Content with background positioned at the center left -->
</div>

In the example above, the background of the element will be positioned at the center left.

.bg-pos-center Sets the background position to the center.

CSS equivalent: background-position: center;

Example usage:

<div class="bg-pos-center">
  <!-- Content with background positioned at the center -->
</div>

In the example above, the background of the element will be positioned at the center.

.bg-pos-center-right Sets the background position to the center right.

CSS equivalent: background-position: center right;

Example usage:

<div class="bg-pos-center-right">
  <!-- Content with background positioned at the center right -->
</div>

In the example above, the background of the element will be positioned at the center right.

.bg-pos-bottom-left Sets the background position to the bottom left corner.

CSS equivalent: background-position: bottom left;

Example usage:

<div class="bg-pos-bottom-left">
  <!-- Content with background positioned at the bottom left corner -->
</div>

In the example above, the background of the element will be positioned at the bottom left corner.

.bg-pos-bottom-center Sets the background position to the bottom center.

CSS equivalent: background-position: bottom center;

Example usage:

<div class="bg-pos-bottom-center">
  <!-- Content with background positioned at the bottom center -->
</div>

In the example above, the background of the element will be positioned at the bottom center.

.bg-pos-bottom-right Sets the background position to the bottom right corner.

CSS equivalent: background-position: bottom right;

Example usage:

<div class="bg-pos-bottom-right">
  <!-- Content with background positioned at the bottom right corner -->
</div>

In the example above, the background of the element will be positioned at the bottom right corner.

These utility classes provide a convenient way to control the background position of elements, allowing you to customize where the background is positioned within the element's box.