How to Control the Background Size in Tailwind CSS ?

To control background-size in Tailwind CSS, use the bg-{size} utility classes. These classes allow you to adjust the background size, providing options like bg-cover for covering the entire element, bg-contain for fitting the content within, and custom sizes such as bg-auto or bg-50%. Tailwind simplifies background sizing, offering flexibility and ease of customization for a seamless design experience.

Using bg-cover

The "bg-cover" class in Tailwind CSS ensures full coverage of the background image within the container.

Syntax:

<element class="bg-cover">
 <!-- Your content goes here -->
</element>

Example: Implementation to show bg-cover property.

Output:

Using bg-contain

The "bg-contain" class sets the background image size to fit within the container dimensions, scaling it accordingly.

<element class="bg-contain">
 <!-- Your content goes here -->
</element>

Example: Implementation to show bg-contain property.

Output:

Using bg-auto

Tailwind's "bg-auto" class adjusts the background size automatically based on its content.

<element class="bg-auto">
 <!-- Your content goes here -->
</element>

Example: Implementation to show bg-auto property.

Output: