📪Backgrounds Repeat

Background Repeat Classes

The following classes control the background repeat behavior of elements:

.bg-repeat Sets the background to repeat both horizontally and vertically.

CSS equivalent: background-repeat: repeat;

Example usage:

<div class="bg-repeat">
  <!-- Content with background repeated both horizontally and vertically -->
</div>

In the example above, the background of the element will be repeated both horizontally and vertically.

.bg-repeat-x Sets the background to repeat horizontally only.

CSS equivalent: background-repeat: repeat-x;

Example usage:

<div class="bg-repeat-x">
  <!-- Content with background repeated horizontally -->
</div>

In the example above, the background of the element will be repeated horizontally.

.bg-repeat-y Sets the background to repeat vertically only.

CSS equivalent: background-repeat: repeat-y;

Example usage:

<div class="bg-repeat-y">
  <!-- Content with background repeated vertically -->
</div>

In the example above, the background of the element will be repeated vertically.

.bg-no-repeat Sets the background to not repeat.

CSS equivalent: background-repeat: no-repeat;

Example usage:

<div class="bg-no-repeat">
  <!-- Content with background not repeated -->
</div>

In the example above, the background of the element will not be repeated.

.bg-space Sets the background to repeat and space out the images, adjusting the spacing between repeated images.

CSS equivalent: background-repeat: space;

Example usage:

<div class="bg-space">
  <!-- Content with spaced background repetition -->
</div>

In the example above, the background images of the element will be repeated with spacing between them.

.bg-round Sets the background to repeat and round the images, adjusting the size of the repeated images to fill the container without cropping.

CSS equivalent: background-repeat: round;

Example usage:

<div class="bg-round">
  <!-- Content with rounded background repetition -->
</div>

In the example above, the background images of the element will be repeated and resized to fit the container without cropping.

These utility classes provide a convenient way to control the background repeat behavior of elements, allowing you to customize how the background images are repeated or not repeated within the element's box.