Tailwind CSS Background Size

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-size property. This class is used to set the size of the background image.

Background Size classes:

• bg-auto
• bg-cover
• bg-contain

bg-auto: It is used to set the background-size class to its default value. It is used to display the background-image to its original size.

Syntax:

<element class="bg-auto">...</element>

Example:

Output:

👁 Image

bg-cover: It is used to resize the background image to cover a whole container element.

Syntax:

<element class="bg-cover">...</element>

Example:

Output:

👁 Image

bg-contain: It is used to contain the background image within the container by shrinking.

Syntax:

<element class="bg-contain">...</element>

Example:

Output:

👁 Image