Tailwind Background Size

The tailwind background size utility class in Tailwind CSS allows you to control the size of background images applied to elements. With Tailwind's background size class, you can easily adjust the dimensions of background images to achieve the desired visual effect.

How to apply Tailwind Background Size

To apply a specific background size to an element, you can use the bg-{size} utility class, where {size} represents the desired background size. Here are some common values you can use:

• bg-auto: The background image is displayed at its original size.
• bg-cover: The background image is scaled proportionally to cover the entire element, potentially cropping parts of the image.
• bg-contain: The background image is scaled proportionally to fit within the element, ensuring the entire image is visible but potentially leaving empty space.

Here is a basic example:

<div class="bg-cover">
	This element has a background image set to cover the entire area.
</div>

Preview

Tailwind Background Size: Examples

bg-auto: Original Image Size

<div
	class="bg-auto bg-no-repeat h-64 w-full bg-top rounded"
	style="background-image: url('https://images.unsplash.com/photo-1547444196-2ea3ce201cc6?q=80&w=470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
></div>

Preview

Use Case: Logos or small decorative icons where original size matters.

bg-cover: Full Element Coverage

<div
	class="bg-cover bg-center h-64 w-full rounded"
	style="background-image: url('https://images.unsplash.com/photo-1547444196-2ea3ce201cc6?q=80&w=470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
></div>

Preview

Use Case: Hero sections, banners, or full-width background areas.

bg-contain: Entire Image Visible

<div
	class="bg-contain bg-center bg-no-repeat h-64 w-full rounded p-2"
	style="background-image: url('https://images.unsplash.com/photo-1547444196-2ea3ce201cc6?q=80&w=470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
></div>

Preview

Use Case: When you want to show the whole image without cropping, like product photos or infographics.

Responsive Tailwind Background Size

Tailwind CSS allows you to apply background size classes responsively at different breakpoints. To use responsive tailwind background size classes, you can append the breakpoint prefix to the utility class. For example, md:bg-contain sets the background size to contain starting from the medium breakpoint and above.

<div
	class="bg-contain md:bg-cover lg:bg-auto w-full h-80 bg-no-repeat"
	style="background-image: url('https://images.unsplash.com/photo-1547444196-2ea3ce201cc6?q=80&w=470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"
></div>

Preview

How It Works:

• On small screens: bg-contain keeps the image contained

• On medium screens and up: bg-cover makes it cover the container

• On large screens: bg-auto displays it at original size

This allows your designs to be mobile-friendly and adaptive.

Tailwind Background Size Class Table

✨ What's Next?

Now that you’ve mastered Tailwind Background Size, try experimenting with:

• Tailwind Background Origin

• Tailwind Background Repeat