📪Backgrounds Size

Background Size Classes

The following classes control the background size of elements:

.bg-auto Sets the background size to auto, allowing the background image to be displayed at its original size.

CSS equivalent: background-size: auto;

Example usage:

<div class="bg-auto">
  <!-- Content with background displayed at original size -->
</div>

In the example above, the background image of the element will be displayed at its original size.

.bg-cover Sets the background size to cover, scaling the background image to cover the entire element while maintaining its aspect ratio. The image may be cropped or partially hidden if necessary.

CSS equivalent: background-size: cover;

Example usage:

<div class="bg-cover">
  <!-- Content with background image scaled to cover the element -->
</div>

In the example above, the background image of the element will be scaled to cover the entire element while maintaining its aspect ratio.

.bg-contain Sets the background size to contain, scaling the background image to fit within the element while maintaining its aspect ratio. The entire image will be visible, but there may be empty space around it.

CSS equivalent: background-size: contain;

Example usage:

<div class="bg-contain">
  <!-- Content with background image scaled to fit within the element -->
</div>

In the example above, the background image of the element will be scaled to fit within the element while maintaining its aspect ratio.

.bg-50 Sets the background size to 50%, scaling the background image to occupy 50% of the element's width and height.

CSS equivalent: background-size: 50%;

Example usage:

<div class="bg-50">
  <!-- Content with background image occupying 50% of the element's width and height -->
</div>

In the example above, the background image of the element will be scaled to occupy 50% of the element's width and height.

.bg-100 Sets the background size to 100%, scaling the background image to occupy 100% of the element's width and height.

CSS equivalent: background-size: 100%;

Example usage:

<div class="bg-100">
  <!-- Content with background image occupying 100% of the element's width and height -->
</div>

In the example above, the background image of the element will be scaled to occupy 100% of the element's width and height.

These utility classes provide a convenient way to control the background size of elements, allowing you to adjust how the background image is displayed or scaled within the element.