📪Backgrounds Position
The following classes control the background position of elements:
.bg-pos-top-left
.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
.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
.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
.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
.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
.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
.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
.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
.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.
Last updated