How to Use Tailwind CSS for Controlling Background Size

Tailwind CSS is a utility-first CSS framework that provides a wide range of classes to help you style your HTML elements quickly and efficiently. One of the aspects you can control with Tailwind is the background size of an element. In this article, we’ll explore how to use Tailwind CSS to manipulate the background size of elements on your web page.

Understanding Background Size in CSS

Before we dive into Tailwind’s classes, let’s understand what the background size property does in CSS. The background-size property specifies the size of the element’s background image. The property can take various values:

  • auto: The background image is displayed in its original size.
  • length: You can set the width and height of the background image.
  • percentage: The size of the background image in terms of percentage relative to the element’s size.
  • cover: The background image is scaled to be as large as possible so that the background area is completely covered by the background image.
  • contain: The background image is scaled to the largest size such that both its width and its height can fit inside the content area.

How to Use Tailwind CSS for Background Size

Tailwind CSS provides utility classes that correspond to these values, allowing you to control the background size directly from your HTML markup.

Default Background Size Classes

Tailwind includes several default classes for setting the background size:

  • bg-auto: This class applies the auto value, meaning the background image will retain its original size.
  • bg-cover: This class applies the cover value, making the background image scale to cover the entire element.
  • bg-contain: This class applies the contain value, scaling the image to fit within the element without stretching.

Example Usage

<div class="bg-auto">
  <!-- Your content here -->

<div class="bg-cover">
  <!-- Your content here -->

<div class="bg-contain">
  <!-- Your content here -->

Customizing Background Size

If the default classes don’t meet your needs, Tailwind allows you to customize the background size using your tailwind.config.js file. You can add custom sizes by extending the theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'custom-size': '50% 75%', // Custom width and height

After adding this configuration, you can use the bg-custom-size class in your HTML:

<div class="bg-custom-size">
  <!-- Your content here -->

Responsive Background Sizes

Tailwind also provides responsive variants for background size classes. This means you can apply different background sizes at different breakpoints:

<div class="bg-contain md:bg-cover">
  <!-- This element will have "contain" size by default and "cover" size on medium screens and up -->

Using Background Size with Background Images

When using background size classes, you’ll often combine them with background image classes. Here’s how you can set a background image and control its size:

<div class="bg-[url('/path/to/image.jpg')] bg-cover">
  <!-- Your content here -->

Considerations When Using Background Size

  • Ensure that the background image’s aspect ratio is appropriate for the cover and contain values to avoid unwanted stretching or squishing.
  • Remember that background images are not content images and should not be used for important visual content that needs to be accessible.


Tailwind CSS provides a straightforward way to control the background size of elements using utility classes. Whether you’re using the default classes or customizing your own, Tailwind’s responsive and composable design ensures that you can achieve the desired effect with minimal effort.

For more information on Tailwind CSS and its utilities, you can visit the official Tailwind CSS documentation.

Remember, the key to effectively using Tailwind is understanding the underlying CSS properties. With a solid grasp of how background-size works in CSS, you’ll be able to leverage Tailwind’s utility classes to create responsive and visually appealing designs.

Related Tailwind CSS Background Utilities


What do you think?